CODEWITHSUNDEEP
csslisthtml-lists
keruilin
keruilin

Reputation: 17512

CSS Positioning - Unordered List

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:

alt text

How do I accomplish this effect with CSS?

Upvotes: 2

Views: 7021

Answers (2)

Eswar
Eswar

Reputation: 21

.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>

Upvotes: 2

Dustin Laine
Dustin Laine

Reputation: 38503

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.

Upvotes: 3

Related Questions