CSS как получить плавающий левый текст для переноса?

Question

CSS как получить плавающий левый текст для переноса?

0

Есть ли способ, чтобы все элементы <li> могли вписываться в одну строку в ширину окна (и текст обертывается соответственно?

HTML:

<ul>
    <li>laksdjf laksdj flasdj fladjs flaksd</li>
    <li>laksdjf laksdj </li>
    <li>laksdjf laksdj flasdj fladjs flaksd fladjs flaksd</li>
    <li>laksdjf laksdj flasdj fladjs flaksd</li>
</ul>

CSS:

ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
}

ul li {
        list-style-type: none;
        padding: 0;
        padding: 0 30px;
        float:left;
}

Ширина li должна быть относительно количества текста, содержащегося в нем. Если я поместил на него фиксированный размер, то более длинные текстовые файлы слишком сжаты.

http://jsfiddle.net/5gP3b/

Hopstream 30 дек. 2013, в 17:29

Источник

0

Если вы хотите сделать динамический размер для вашего li, вы должны использовать javascript
Tosx 30 дек. 2013, в 16:21
0

Только с CSS? Я не уверен, но если есть решение, оно, вероятно, заключается в использовании display:table и / или display:table-cell . Но тогда вы можете использовать таблицу :-)
Laurent S. 30 дек. 2013, в 16:21

Теги:

html

css

css3

css-float

1 ответ

Ещё вопросы

Если вы хотите сделать динамический размер для вашего li, вы должны использовать javascript
Только с CSS? Я не уверен, но если есть решение, оно, вероятно, заключается в использовании display:table и / или display:table-cell . Но тогда вы можете использовать таблицу :-)

Mike Vranckx · Accepted Answer · 2013-12-30T14-42-00.000Z

Вы можете использовать table отображения и свойство table-cell для ее достижения: http://jsfiddle.net/5gP3b/1/

Обратите внимание, что это свойство отображения не работает в Internet Explorer 6 и 7...

Это сработало. Есть ли другое решение, которое будет работать и для IE 7?
К сожалению нет. Вы должны предоставить запасной вариант, используя javascript для IE7, рассчитав и установив ширину каждого столбца (и используя float: left )