Внутреннее деление автоматическая подгонка ширина li в т.е.

<div style='width:500px'>  
<ul>  
  <li> some text in 1 line</li>  
  <li> some text in 1 line</li>  
  <li> some text 2 line</li>  
  <li> some 2</li>  
  <li> 2</li>  
</ul>
</div>

Я не знаю, какой правильный код CSS для отображения элементов, например:

первые два результата автоматически помещаются в первую строку, а остальные результаты - во вторую строку. поэтому основная идея состоит в том, чтобы позволить li получить собственную ширину в зависимости от размера данных.

заранее спасибо

Источник

6 ответов

Решение

Я вижу два способа добиться того, о чем вы думаете:

Вариант 1: сделать <li> теги display:block;, а также float:left;

Вариант 2: сделать <li> теги display:inline-block; а также white-space:nowrap;

Я бы сам выбрал вариант 2, так как он позволит избежать причуд, которые вы можете получить с помощью поплавков. Кроме того, вы можете обнаружить, что вам все равно понадобится Nowrap, даже с вариантом 1.

[РЕДАКТИРОВАТЬ]

Вам также может понадобиться стилизовать <ul> тег. Может быть width:100%; и / или display:block;,

Я все еще говорю display:inline-block; а также white-space:nowrap; должен сделать это для <li> теги. Но если это не работает, было бы полезно, если бы вы сказали, как это работает.

Кроме того: Вы также говорили, что некоторые ответы не работают в IE, но вы не сказали, какая версия IE - IE6,7,8 и 9 имеют очень разные уровни поддержки CSS; это поможет узнать, какие из них вам нужно поддерживать.

Источник

Я бы предложил стилизовать навигацию "как" таблицы:

  • Контейнер div - отображение: таблица; равноценный <table>
  • Список содержимого - отображение: таблица-строка; равноценный <tr>
  • Элементы списка - отображение таблицы: таблица-ячейка; равноценный <td>

Обивка на <a> Стиль элемента просто выравнивает расстояние и может быть отрегулирован по мере необходимости, элементы ячейки обрабатывают оставшуюся ширину и используют ее относительно размеров ячейки.

Работа над FF / Chrome / Safair / IE 9 & 8

IE7 и ниже вам нужно будет использовать плавающее решение!

Рабочий пример:

<html>
<head>
    <title>test</title>
    <style type="text/css">

        div {
            margin: 0 auto 0 auto;
            width: 954px;
            height: 36px;
            border: 1px solid #000000;
            display: table;
        }

        ul {
            width: 100%;
            display: table-row;
            list-style: none;
            height: 100%;
        }


        li {
            display: table-cell;
            white-space: nowrap;
            border: 1px solid #00ff00;
            color: #ff0000;
        }

        a {
            text-align: center;
            display: block;
            padding: 0 15px;
            line-height: 36px;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li><a>Item1</a></li>
            <li><a>Long Item 2</a></li>
            <li><a>Very Long Item 3</a></li>
            <li><a>Even longer example Item 4</a></li>
            <li><a>Item5</a></li>
            <li><a>Item6</a></li>
            <li><a>Medium Item7</a></li>
            <li><a>Item8</a></li>
        </ul>
    </div>
</body>

Источник

У вас есть несколько способов сделать то, что вы хотите:

  • Как говорит MatTheCat, display: inline с одним display: block буду работать
  • Так же, float: left; на всех кроме второго тоже добьется цели
  • Установите их всех в display: inline и есть <br /> в конце второго элемента (немного неприятный, но простой)

Тем не менее, вам, вероятно, гораздо лучше рассматривать их как два отдельных списка. Трудно сказать, не зная, для чего вы его используете, но разделение элементов на части сделает его более читабельным и позволит лучше контролировать расположение и стилизацию двух линий.

Если цель состоит в том, чтобы элементы списка текли горизонтально, чтобы заполнить div, и "первые два в первой строке" - просто пример, тогда просто установите display: inline на каждом элементе списка.

Если вы хотите, чтобы первые два результата имели ширину 250 пикселей (половина вашего деления), установите стиль как float: left; width: 50%; на тех двух, и остальная часть Diaplay встроена.

Источник

Может быть, плавающие свойства могут помочь

<div style='width:500px; overflow: hidden;'>
<ul>
<li> some text in 1 line</li>
<li> some text in 1 line</li>
<li> some text 2 line</li>
<li> some 2</li>
<li>2</li>
</ul>
</div>

li {
float: left;
display: block;
}

Источник

Я думаю, что лучший способ применить

li { display:inline; }

и вставить <li> без этого правила выполнить разрыв строки.

Но вы не можете разместить все данные в одной строке в одном <li>?

Источник

Пускай div, это должно помочь...

Источник
Другие вопросы по тегам