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?
Add a comment
|
2 Answers
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.
2 Comments
eyelidlessness
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.)
Dustin Laine
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..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>
