Reputation: 31407
The point is to have a single line on this menu, wrapped. Instead, we are getting "two lines" and I'm not getting why is he dropping the line.
Can anyone please drop me a quick look about how is this happening ?
The HTML
<div id="main-menu">
<ul>
<li><a href="">item 1</a></li>
<li><a href="">item 2</a></li>
<li><a href="">item 3</a></li>
</ul>
</div>
CSS
#main-menu {
clear: right;
overflow: hidden;
margin-top: 75px;
float:right;
}
#main-menu ul {
overflow: hidden;
text-align: right;
border-radius: 5px;
background-color: #333;
}
#main-menu ul li {
display:inline-block;
padding: 2px 2%;
}
#main-menu ul li a {
color: #fff;
font-size: .9em;
}
#main-menu ul li:hover {
background-color: #EFAB00;
}
#main-menu ul li a:hover {
text-decoration: none;
}
Here an example:
Upvotes: 0
Views: 151
Reputation: 67244
It's because the parent element (ul) is simply not wide enough to accommodate your lis.
Make the UL wider and it will work.
http://jsfiddle.net/Kyle_Sevenoaks/XRm6Q/8/
Add width: 100%;
to the parent DIV, not the UL. Sorry :D
http://jsfiddle.net/Kyle_Sevenoaks/XRm6Q/16/
Upvotes: 1
Reputation: 26918
This isn't caused by the float
, it's because of the padding you're applying to your li
s (because when you have percentage padding
s, the parent doesn't resize-to-fit). If you change your padding: 2px 2%;
to padding: 2px;
the wrapping will be gone: little link.
Hope that helped!
Upvotes: 2
Reputation: 113392
Either set a width
on the menu, or use table-row
display
for it, and table-cell
for the items. In the latter case you'll probably what white-space: nowrap
on the items too, but it has advantages if you don't know what the width will be.
Upvotes: 1
Reputation: 123438
See http://jsfiddle.net/XRm6Q/10/
I used white-space: nowrap;
on ul
element and white space: normal
on li
elements. In this way you don't need to adjust the parent width (then just remove/adjust the extra padding on li
elements or use a margin instead)
Doing so, all the items will stay in the same row
Upvotes: 1