Aligning Li Items In The Same Line
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.listli {
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
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.listli {
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.listli {
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:
<ulclass="list"><li><spanclass="bull">TEXT TEXT</span></li><li><spanclass="bull">TEXT TEXT</span></li><li><spanclass="bull">TEXT TEXT</span></li></ul>
and CSS like this:
.price_carousel.listli {
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
Post a Comment for "Aligning Li Items In The Same Line"