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

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

3 голосов
/ 22 октября 2010 
<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 ]

5 голосов
/ 22 октября 2010

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

Вариант 1: Сделайте <li> теги display:block; и float:left;

Вариант 2: Сделайте <li> теги display:inline-block; и white-space:nowrap;

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

[EDIT]

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

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

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

1 голос
/ 07 февраля 2012

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

  • Контейнер div - отображение: таблица; равно <table>
  • Список содержимого - отображение: таблица-строка; равно <tr>
  • Список элементов - отображение таблицы: table-cell; равно <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>

1 голос
/ 22 октября 2010

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

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

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

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

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

0 голосов
/ 22 октября 2010

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

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

li {<br> float: left;<br> display: block;<br>}

0 голосов
/ 22 октября 2010

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

li { display:inline; }

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

Но вы не можете поместить все данные вта же строка в ОДНОЙ <li>?

0 голосов
/ 22 октября 2010

Перемести div, это должно помочь ...

...