I want to position an unordered list of items on the left-hand side of a menu header (horizontally displayed, not vertically). For example where you see Home, HTML, etc:
How do I accomplish this effect with CSS?
+1
A:
Floats
ul
{
margin: 0;
list-style-type: none;
}
ul li
{
margin: 0;
list-style-type: none;
float: left;
}
ul li a
{
display: block;
}
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">...</a></li>
</ul>
To get the lists like you have in your image, you will need to have two sets of UL and then apply a float: left; to the left one and a float: right; to the right.
With floats you have to clear them to avoid "breaking" your design later. You can do this by adding a <br style="clear: both;" /> below the lists. You can also add that style to the next div.
Dustin Laine
2010-10-29 22:42:43
`float` is probably overkill for this (although I'd wager an inspection of the site in the screenshot would reveal a similar solution). It's high time people writing CSS learn more about the `inline-block` display type, which is far more versatile and with far fewer side-effects. As an introduction, this is a cross browser solution: `display: -moz-inline-box; display: inline-block; *display: inline; *zoom: 1;` (The first rule is for Firefox < 3.0; the last two are for IE < 8, if the element's "native" `display` is `block`; adjust as necessary.)
eyelidlessness
2010-10-30 08:16:36
I prefer full compliance over ease of use. I do not like hacks, and I avoid at all costs. Plus there are other issues with `inline-block`, but it is an alternative and you should submit an answer.
Dustin Laine
2010-10-30 16:19:33
+1
A:
.menu{
text-align:left;
}
.menu ul{
margin:0px;
padding:0px;
}
.menu ul li{
display:inline;
margin:0px;
padding:0px 10px 0px 10px;
text-align:center;
}
<div class="menu">
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
</ul>
</div>
Eswar
2010-10-30 07:55:54