HTML & CSS Horizontal menu with items on left & right
I'm building an horizontal menu in HTML+CSS. The current result is fine, except I want to have some items on the left, and others on the right. I couldn't find useful result on Google with such common keywords so I'm asking on SO.
Here's my code so far:
#menu
{
background-color: #383838;
height: 65px;
margin-bottom: 20px;
}
#menu ul li
{
float: left;
}
<div id="menu">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</div>
I'd like to have Link 3 on the right, so the space between link 2 and 开发者_如何学JAVA3 should be filled at maximum. I don't want a filler <li>
tag, but instead apply a class to the last <li>
on the left, or the first <li>
on the right. Don't want to adjust the width as I've a :hover background color changing effet on the links. I suppose margin or padding should do the trick but I can't manage to find how.
Any clue?
Have you tried applying a float: right;
style to the <li>Link 3</li>
element?
精彩评论