CODEWITHSUNDEEP
csshtml
ProfK
ProfK

Reputation: 51064

How do I get this list to render horizontally?

I have the following ul type list, and need to get it to display horizontally, but it doesn't. What am I missing?

<ul style="display: inline;">
    <li>
        <div class="store-display-item" style="display: inline;">
            <img class="store-display-image" src="/Images/ToughBook.jpg">
        </div>
    </li>
    <li>
        <div class="store-display-item" style="display: inline-block;">
            <img class="store-display-image" src="/Images/ToughBook.jpg">
        </div>
    </li>
</ul>

Upvotes: 0

Views: 124

Answers (3)

Zoltan Toth
Zoltan Toth

Reputation: 47667

Make your <li>-s inline - DEMO

<ul>
    <li style="display: inline;">
        <div class="store-display-item" style="display: inline;">
            <img class="store-display-image" src="/Images/ToughBook.jpg">
        </div>
    </li>
    <li style="display: inline;">
        <div class="store-display-item" style="display: inline-block;">
            <img class="store-display-image" src="/Images/ToughBook.jpg">
        </div>
    </li>
</ul>

Two things to make your code cleaner:

  1. the <div> inside the <li> looks unnecessary - you can style the <li> to behave like a container
  2. don't use inline CSS

EXAMPLE

<style>
li { display: inline; }
</style>

<ul>
    <li><img class="store-display-image" src="/Images/ToughBook.jpg"></li>
    <li><img class="store-display-image" src="/Images/ToughBook.jpg"></li>
</ul>

DEMO

Upvotes: 3

Jezen Thomas
Jezen Thomas

Reputation: 13800

You can use display: inline-block;.

ul {font-size: 0;}
li {display: inline-block; vertical-align: top; *display: block; zoom: 1;}

Don't listen to people who say that display: inline-block; doesn't work in IE7. It does if you know what you're doing.

Upvotes: 0

Mark
Mark

Reputation: 5720

li {
    float: left
}

need to float your li.

or you can use display: inline-block; on your li doesn't work in IE7 and older

li {
    display: inline-block;
}

Upvotes: 2

Related Questions