Aligning Li Items In The Same Line

I am trying to have li items in the same line. I managed to get that but for some reason each li item gets broken in 2 lines. I am not sure why. Is there a way I can fix it? HTML:

Solution 1:

Remove the floats and change the inline-block attributes to li elements. Like this:

.wrapper {
    text-align: center;
}
.price_carousel .list {
    padding-left: 1em;
    display:block;
    margin: 0;
}
.price_carousel .list li {
    display: inline-block;
    vertical-align: middle;
    list-style-position: inside;
    list-style-type: disc;
    margin-right: 1em;
    text-align: left;
    white-space: nowrap;
}

I have added a white-space: nowrap; declaration to li elements to they never break inside, but you can take it down (I usually take it down myself, but depends on you).

But if you want the UL to never break (so the LI will always be in the same line), just add this white-space: nowrap; declaration to the UL

See fiddle here

---

EDIT TO INCLUDE BULLETS: inline-block elements don't display list-style-type, thus the options to include bullets in your case are as follows:

a) to use float:left;

.price_carousel .list li {
    float:left;
    vertical-align: middle;
    list-style-position: outside;
    list-style-type: disc;
    margin-right: 1em;
    text-align: left;
    white-space: nowrap;
}

b) to use a background-image as bullet

.price_carousel .list li {
    display:inline-block;
    vertical-align: middle;
    list-style-position: outside;
    list-style-type: disc;
    margin-right: 1em;
    text-align: left;
    white-space: nowrap; padding-left:30px; background:url('http://upload.wikimedia.org/wikipedia/commons/e/ef/Bullet_go.png') no-repeat center left;
}

c) to include a span in your HTML markup

HTML goes like this:

    <ul class="list">
        <li><span class="bull">TEXT TEXT</span>
        </li>
        <li><span class="bull">TEXT TEXT</span>
        </li>
        <li><span class="bull">TEXT TEXT</span>
        </li>
    </ul>

and CSS like this:

.price_carousel .list li {
    display:inline-block;
    vertical-align: middle;
    list-style-position: outside;
    list-style-type: disc;
    margin-right: 1em;
    text-align: left;
    white-space: nowrap;
    padding-left:30px;
}
.bull {
    display:list-item
}

Solution 2:

In Chrome it renders correctly and they do all display on the same line if you make the window larger.. due to the length of the line and the fact that you've added a margin on the left, there's no room for them to remain on the same line unless you make the window large enough for them to do so.

I see now that in Firefox it does break to two lines.. and my first assumption is it's related to this style that your adding:

list-style-position: inside;

If you remove that, then it renders correctly.

It appears as though Firefox may have some issues with list-style-position. Here's a issue that I found on Bugzilla with a similar issue: https://bugzilla.mozilla.org/show_bug.cgi?id=36854