I have a UL > li's in my html, and the li's are set to float: left.
My doubt is how to separate them, inside a father div, equally, so that doesn't matter how many li's are in the ul, they still have the same spacing between them?
If li's are not 'good' to do that, what is better?
As per I understand is better you can write like this:
li + li{
margin-left:10px;
}
You can also use display:table property for this. Write like this:
ul{
display:table;
width:100%
}
li{
display:table-cell;
}
You may set a border to the ul and set a margin to child lis. Or you may set border both to ul and lis. The reason for parent border is, when lis merge, they will combine their borders creating a double border where they meet.
Here is a Live Demo showing both methods.
Related
I have vertical drop down menu, and I want that the sub menu will be vertical too.
Seemingly, if you set float:left for the sub menu li it should be fine, but the problem is, that the sub menu ul which is nested in li has a width that depends on it's parent (li) width and don't expands enough, so that the lines (li) of sub menu are presented vertically.
You can see an example: http://jsfiddle.net/r6qNJ/
I thought about two solutions:
Solution 1:
Expanding a width of a nested ul to a very big one
ul.sub{width:999px;}
The problem is, that by this way I have to dissable a background and border of a sub menu ul, as it has a non nature width.
An example: http://jsfiddle.net/r6qNJ/1/
Solution 2
Using display:flex property, so that the width of a child element will not depend on it's parent width.
An example: http://jsfiddle.net/r6qNJ/2/
The problem is, that it's not supported in old browsers.
So, what is more elegant and efficient CSS solution you can offer?
(I am looking for a pure CSS solution, without changing HTML, since I am talking about changing in wordpress theme and prefer to make changes only in css files)
You can have this option with white-space:
ul.sub{
position:absolute;
left:0px;
top:100%;
padding:0;
display:inline-block;
white-space:nowrap;
}
ul.sub li{
display:inline-block;
margin-right:-4px;
width:80px;
float:none;
}
The demo http://jsfiddle.net/r6qNJ/23/
I'm making a dropdown menu, but all the styles from the first ul is being added to the styles on every ul beneath the first ul.
I've tried overriding the styles using !important, and moving the css to different levels.
Anyone got a clue about whats going on here?
This image probaly explains it the best way: http://screencast.com/t/UrkRbjjaYctp
Thanks.
#menuwrapper > ul{
padding-left:37px;
}
#menuwrapper ul ul {
padding-left:40px;
}
This should solve your issue
This is expected behavior. Paddings are added relatively.
If you don't want the nested ul to be padded 37px you have to remove the padding from parent ul (or use some hack as negative margin e.g. margin-left: -37px).
If you remove padding from the parent you will probably need to add some margin to each its child to preserve the layout. I'd suggest to reconsider the HTML structure.
For some reason my list items are not sitting within my UL element which is disturbing the flow of the page, and doesn't look right. I have tried every position element under the sun but nothing works. I wondered is it because I'm styling a different div instead of the UL element?
Please see example here
The red border is suppose to hold the list elements and if one list description becomes longer, then the red background should grow as well.
Thanks
Your LI have float in it so you have to clear his parent which is UL. Write like this:
ul{
overflow:hidden;
}
Check this http://jsfiddle.net/Uc5cr/1/
Try this one
ol, ul
{
overflow:auto;
}
See the updated fiddle: http://jsfiddle.net/Uc5cr/8/
What's happening is that the LI elements are floating, and therefor going over the UL outlines. You'd typically solve this by clearing your LI elements with a element using clear: left; property in CSS, when you want to clear the floating.
But since this is in an un-ordered list, it is probably best to use a CSS hack called "clearfix" on your UL-element to solve this. That way the UL element will follow the LI elements in height.
Example: http://jsfiddle.net/mikaelbr/JkGRj/
Note: There are many versions of the clearfix hack. Do a google search to find some, if you are interessted in seeing how they work.
give overflow:hidden to the div erd background in order to contain the ul element
Check this out http://jsfiddle.net/Uc5cr/7/
Check this link!
I am having the hardest time trying to figure out why my last li item is being pushed to the bottom in IE. I have the width, height set for the container. The li has padding/margin to 0. Li is float left. Still being pushed down. Seeking a Guru to help a n00b here.
Try putting margin:0 to the ul rule ..
The automatic margin the IE assigns, decreases the width available to contain the floated elements, and so they wrap ...
Your example page is completely invalid. Try adding a doctype, html, head and body tags and try again.
(Having said that, it looks fine in IE.)
Float the LIs, don't make them inline.
#widget_container ul {
padding:0;
list-style-type:none;
}
#widget_container ul li {
padding:0;
margin:0;
float:left;
}
On this page: http://catonthecouchproductions.com/fish/boat-captain.html I have a list on the bottom right box in yellow, but it is not displaying as a list-style-type:circle, but i have it set in my CSS.
I am not sure why it is acting this way. Any ideas?
I have FireBug installed and it doesn't seem like anything is conflicting with it.
You need to add a left-margin to li to get them to show up.
ul li { margin-left: 10px; }
should do it
You haven't left any space for the circle to display - try margin:1px 10px; on the ul li instead
list-style-type:circle; should be defined for the ul and not the li.
Add a padding to the ul element that has been reset by reset.css.
Another detail, that I saw: your <ul> element has list-style-type:disc; and the <li> elements list-style-type:circle;. This property should only be declared for the <ul> element.
I had the same problem, when floating li.
As soon as I removed float from li element, the circles in ul showed up in IE7.