CODEWITHSUNDEEP
htmlcsslist
Ben
Ben

Reputation: 188

Spanning Lists to multiple lines

I have the following code and for the life of me cannot get the text to break and display beneath the image like it would in a table.

<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>

Ideally I would like to hide the bullets and display inline. The list items need to elegantly cascade beneath each other depending on the content width too.

This will be put in to a blog post to display a block of nominated films/dvds.

Any help would be greatly appreciated, thanks.

Upvotes: 0

Views: 47

Answers (3)

Bryan Kerr
Bryan Kerr

Reputation: 46

There are a couple of options:

Option 1

The <img> needs set as display:block. This will force your text to a new line and take away the need for the <br>

Demo:

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

Option 2

A <span> needs introduced to the markup and set as display:block. This will also force your text to a new line and take away the need for the <br>

Demo:

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

Upvotes: 1

SW4
SW4

Reputation: 71150

See this fiddle, you had some erroneous display properties (block inline instead of inline-block), I've also tightened up your markup

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;
}

Upvotes: 1

Majid
Majid

Reputation: 14243

you should not use </br> for this, you also should correct this:

display:inline-block;

instead of

display:block inline;

Upvotes: 0

Related Questions