Spanning Lists в несколько строк

Question

Spanning Lists в несколько строк

0

У меня есть следующий код, и для меня жизнь не может заставить текст сломаться и отобразить под изображением, как это было бы в таблице.

<ul style="display:block inline; list-style:none;">
<li style="display:inline"><img src="BoxCover-01.jpg" /><br />Title 01</li>
<li style="display:inline"><img src="BoxCover-02.jpg" /><br />Title 02</li>
<li style="display:inline"><img src="BoxCover-03.jpg" /><br />Title 03</li>
<li style="display:inline"><img src="BoxCover-04.jpg" /><br />Title 04</li>
<li style="display:inline"><img src="BoxCover-05.jpg" /><br />Title 05</li>
</ul>

В идеале я хотел бы скрыть пули и отобразить inline. Элементы списка должны быть элегантно каскадом друг под другом в зависимости от ширины содержимого.

Это будет помещено в сообщение в блоге, чтобы отобразить блок номинированных фильмов /dvds.

Любая помощь будет очень признательна, спасибо.

Ben 20 нояб. 2013, в 18:08

Источник

0

Должно быть <ul style='display:inline-block;list-style:none;'> .
Albzi 20 нояб. 2013, в 16:58
0

я думаю, вам нужно поместить display: inline-block на <li>
jbenjohnson 20 нояб. 2013, в 16:59

Теги:

html

list

css

3 ответа

1

Есть несколько вариантов:

Опция 1

<img> нужно установить как display:block. Это заставит ваш текст на новую строку и заберите необходимость <br>

Демо - версия:

http://jsfiddle.net/Gzd8m/1/

Вариант 2

A <span> необходимо ввести в разметку и установить как display:block. Это также заставит ваш текст на новую строку и заберите необходимость <br>

Демо - версия:

http://jsfiddle.net/Gzd8m/2/

Bryan Kerr 20 нояб. 2013, в 15:23

0

вы не должны использовать </br> для этого, вы также должны исправить это:

display:inline-block;

вместо

display:block inline;

Majid 20 нояб. 2013, в 14:58

Ещё вопросы

Должно быть <ul style='display:inline-block;list-style:none;'> .
я думаю, вам нужно поместить display: inline-block на <li>

SW4 · Accepted Answer · 2013-11-20T14-29-00.000Z

Посмотрите на эту скрипку, у вас были некоторые ошибочные свойства отображения (блокировать встроенный вместо встроенного блока), я также затянул вашу разметку

HTML

<ul >
<li ><img src="BoxCover-01.jpg" />Title 01</li>
<li ><img src="BoxCover-02.jpg" />Title 02</li>
<li ><img src="BoxCover-03.jpg" />Title 03</li>
<li ><img src="BoxCover-04.jpg" />Title 04</li>
<li ><img src="BoxCover-05.jpg" />Title 05</li>
</ul>

CSS

ul{
    list-style:none;
    padding:0;
    margin:0;
}
li{
    display:inline-block;
}
img{
    display:block;
}