How to change the order floated elements?
Solution 1
Using display: inline on <li>'s can cause problems, especially if you're eventually going for dropdown menus. I'd recommend something similar to this (only floats show, you know what other styles you want to add):
#extMenu { float: right; }
#extMenu li { float: left; }
So the menu itself will float to the right, while the menu items will float to the left.
Another solution would be to simply reverse the order of your <li>'s
Solution 2
Try this
ul#extMenu {
list-style: none;
padding: 0;
margin: 0;
float: right;
}
ul#extMenu li {
display: inline;
padding: 5px;
}
Solution 3
Why did you choose to float to the right? Floating multiple items to the right means the first item will be the most right item and the last floated item will be on the left of your items.
The align your menu to the right and have your items on one line i would use this:
#extMenuBlock {
text-align: right;
}
#extMenuBlock ul#extMenu {
list-style:none; padding:0; margin:0;
}
#extMenuBlock ul#extMenu li {
display: inline-block; padding:5px;
}
Solution 4
What you really want to do is make each li
element an inline element, and float the ul
as a whole to the right (or use text-align: right
, if you prefer).
New CSS:
#extMenuBlock {
float:right;
}
#extMenuBlock ul#extMenu {
list-style:none;
padding:0;
margin:0;
}
#extMenuBlock ul#extMenu li {
display:inline;
padding:5px;
}
Solution 5
My variation on the answer - no floats at all.
ul#extMenu {
list-style: none;
padding: 0;
margin: 0;
text-align: right;
}
ul#extMenu li {
display: inline;
padding: 5px;
}
Related videos on Youtube
Starx
Website | Careers | GitHub | Freelancer | Odesk | Facebook | Google+ | Twitter | YouTube | Blog Stackoverflow* Top member from Nepal: 2011 & as of March 2012 1st User from Nepal to reach 15K+, 20K+, 25K+, 30K+ on Stackoverflow to get Silver Badge in php (182th world wide), jquery (134th world wide) Projects: jQuery Fancy Menu [git] jQuery Tiny Highlighter [git] Stackexchange
Updated on April 25, 2022Comments
-
Starx almost 2 years
I hardly use
float:right
in my css and now I did and came across a annoying problem. I am floating my menu items to the rightmy HTMl
<ul id="extMenu"> <li> <a href="#">Home</a> </li> <li> <a href="#">Feedback</a> </li> <li> <a href="#">Contact</a> </li> </ul>
my CSS
#extMenuBlock { } #extMenuBlock ul#extMenu { list-style:none; padding:0; margin:0; } #extMenuBlock ul#extMenu li { float:right; padding:5px; }
Now when the items are float, I receive my menu is this order
Contact Feedback Home
, but I want them in opposite order ieHome Feedback Contact
-
Starx almost 14 years@sohnee, this is definately a better solution than that of @dDejan, avoiding float, but the padding problem still remains. Why is the top and bottom padding being avoided? Got an answer
-
stefanglase almost 14 years@Starx: See my answer, thats why I am using
display:inline-block
and notdisplay:inline
. You cannot give inline elements any padding. -
Starx almost 14 yearsThanks for this alternative, But my actual question is still unanwered, How to change the ORDER of the floated element?
-
Starx almost 14 yearsThanks for this alternative, But my actual question is still unanwered, How to change the ORDER of the floated element?
-
Fenton almost 14 years@Starx - which padding in particular. I'm working in Firefox and if I increase the padding: 5px, I see the padding increase on screen. I should be able to answer if you let me know the exact padding issue. Cheers.
-
Fenton almost 14 years"Using display: inline on <li>'s can cause problems" - I'd be interested in hearing more detail on this, perhaps reference a source for this.
-
Starx almost 14 years@cmm, no vertical padding dude, how to preserve it
-
Starx almost 14 years@sohnee, Vertical padding ie top and bottom
-
Starx almost 14 years+1 @Ryan, Nice one. This works and is IE compatible. But I would like to hear something related to changing the order of the floated elements
-
Fenton almost 14 yearsYou could solve that by adding the same padding to the UL: ul#extMenu { padding: 5px 0; ...
-
Ryan Kinal almost 14 yearsRe: Sohnee - w3.org/TR/REC-html40/struct/global.html#h-7.5.3 "Generally, block-level elements may contain inline elements and other block-level elements. Generally, inline elements may contain only data and other inline elements." Since the <li>'s are now inline, they can't contain block elements, like <div>'s and <ul>'s.
-
Ryan Kinal almost 14 yearsRe: Starx - Yeah, I was looking for a way to change the order, but I don't think it's actually possible, as floated elements "stack up" on each other. The only real way to change the order is to switch up the HTML, which isn't always possible.
-
Fenton over 13 years@Ryan Kinal - the example in the question does not contain any block level elements inside of the list item elements, meaning you are coding to a complexity that does not exist.
-
Ryan Kinal over 13 years@Sohnee True. I was, however, coding in a forward-thinking manner. If, at some point in the future, a dropdown needs to be added, then this code will not break.