Floating LI's

HTML & CSS
1

I am using an Unordered List to hold two buttons in a header. I would like to add my navigation to a 3rd <li>, but need that to the far right of the parent container.

Is it possible to add float:right to a <li> in an <ul>?

If so, how would I do that?

Sincerely,

Debbie

2

Yep fairly straightforward, here’s one way:

Add a class to the last LI element

<ul class="buttons">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li class="last"><a href="#">Link 3</a></li>
</ul>

Style the list

.buttons { list-style: none; padding: 0; margin: 0; }
.buttons li { float: left; } /* all left by default */
.buttons li.last { float: right; } /* add an exception for the last LI */
3

So I don’t have to add a float to the UL?

Debbie

4

No, it’s only the list items (LI) that you want to float, you’d only float the UL if you wanted other content to wrap around the whole list.

5

(Paul’s gonna yell at me…)

So if I wanted to make the UL have a blue background, then I’d need to float the UL so that it wrapped the floated LI’s, right?

Debbie

6

No need to float if you don’t have to, using my previous code example…

<ul class="buttons">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li class="last"><a href="#">Link 3</a></li>
</ul>

You could set a specific height for the UL element…

.buttons { 
list-style: none; 
padding: 0; 
margin: 0; 
background: blue; 
height: 40px;
clear: both;
}

…or you could use the “overflow” method


.buttons { 
list-style: none; 
padding: 0; 
margin: 0; 
background: blue; 
overflow: hidden; 
clear: both; 
}