I'm looking to create a navigation menu with list items rendered in one line. How do I do this?
+7
A:
li {
display: inline;
}
EDIT: I now realize why I felt strange answering with display: inline: because I usually use float: left myself instead, which is Duracell's answer (so to him goes my upvote!).
Anyway, while either method will cause your lis to display in one line, inline elements and floated elements do behave differently. Depending on how you've styled your layout, you may have to choose one or the other.
BoltClock
2010-05-27 05:05:50
Floated elements can still be block-level (in fact, they're ALWAYS treated as block-level) and so you can still apply box model properties like padding and margin to them. Inline elements ignore padding/margin, so float: left is usually the best solution. In fact, if you use BOTH, it will correct a bug in IE6 that causes floated elements to have double margins (though all browsers will still render them as block-level).
Daniel
2010-05-27 07:23:00
That means even if I set them to be inline elements, as long as they're floats they're ALWAYS treated as block-level, right?
BoltClock
2010-05-27 07:35:23
+1
A:
My favorite way to do it it's by using because it's allow do use width, height, margins and padding:
li { display: inline-block; }
But have some render problem in IE, to fix use (order it's important):
li
{
display: inline-block;
zoom: 1;
*display: inline;
}
Cesar
2010-05-27 05:14:07
A:
One of the best resources on the subject is http://css.maxdesign.com.au/listamatic/ (a little outdated though).
They suggest both li {display: inline;} and li {float: left;} depending on the effect you want.
Look for example their "Simple horizontal list" http://css.maxdesign.com.au/listamatic/horizontal01.htm
Eelvex
2010-05-27 05:41:51
+1.. I was wondering. Why didn't anyone mention the list-style: none. It is needed right? Or bullet points will appear horizontally.
Senthil
2010-05-29 07:30:58
A:
You could do:
li {
float: left;
display: inline;
}
If you want to maintain it's block characteristics but still need side-by-side, you could do:
li {
float: left;
display: inline-block;
}
Sarfraz
2010-05-27 06:28:32
Doesn't floating an element automatically cause it to `display: block`? Or is it still overridable?
BoltClock
2010-05-27 06:30:10
@BoltClock: You could use either `display:inline` or `float:left` but using float saves you from display getting screwed up in IE<=7, however, this depends on your html markup, using both together is better in most cases.
Sarfraz
2010-05-27 06:33:13
Just to add some clarification, it's actually the addition of display:inline that corrects the IE <= 6 bug. And yes Bolt, floating will cause an element to be treated as display: block. IE6 will do weird things with the margin if you don't in turn specify display: inline (confusing, because IE6 will STILL render it as block-level, just will not screw up the margins).
Daniel
2010-05-27 07:26:56
A:
you will try this styling
li{
height:20px;
float:left;
list-style-type: none;
width:70px;
padding:3px;
border-right:1px solid #3687AF;
background-color: #015287;
background-repeat: no-repeat;
background-position: center 30px;
}
it will work for u sure...
subodh
2010-05-27 07:02:08