Full width li elements
I am trying to make the list elements of this list full width. They had padding on them and when you hover on them the padding is coloured yellow. The padding isn’t filling up the whole ul block which is what I want it to do. I have tried using different displays and making the width of the list element 100% but this doesn’t work.
.footer-navigation < list-style: none; padding-left: 0px; display: inline-block; width: 100%; >.footer-navigation li < padding: 10px; width: 100%; >.footer-navigation a < padding: 10px; color: #000000; >.footer-navigation a:hover
5 Answers 5
Make your anchors block level instead of inline. You can also add box-sizing so that they don’t poke out and extend beyond the right edge:
.footer-navigation < list-style: none; padding-left: 0px; display: inline-block; width: 100%; >.footer-navigation li < padding: 10px; width: 100%; box-sizing: border-box; >.footer-navigation a < padding: 10px; color: #000000; display: block; >.footer-navigation a:hover
actualy you padding isn’t changing color to yellow on hovw.it is anchor tag. Change it to li:hover to change color of full li item. Here is fiddle
.footer-navigation < list-style: none; padding-left: 0px; display: inline-block; width: 100%; >.footer-navigation li < padding: 10px; width: 100%; >.footer-navigation a < padding: 10px; color: #000000; >.footer-navigation li:hover
The issue here is that you’re yellow background is showing on the a element. Your ‘li element **is** 100% width, but the highlight is showing on the a` element, which is not 100% width.
- , the problem here is that you’re applying the hover effect on the links inside the
- s not the
- s themselves. s are inline elements they occupy the width of their text only.
you can solve this by applying display: inline-block; to the s.
.footer-navigation < list-style: none; padding-left: 0px; display: inline-block; width: 100%; >.footer-navigation li < padding: 10px; width: 100%; >.footer-navigation a < padding: 10px; color: #000000; width: 100%; display: inline-block; >.footer-navigation a:hover
UL/LI list item full-width
How can create full-width ul/li with that. Like: Note:
- The code should work in IE8
- we don’t know number of li item because they are dynamically created
.record-top-btns < width:100%; display:table; >.record-top-btns a < padding:2px; color:#5c5c5c; display:block; margin-top:2px; margin-bottom:2px; text-align:center; width:100%; >.record-top-btns li < display:table-cell; /* will not work in IE8 */ background:#e3ffca; text-align:center; background:white; >i doubt you can handle dynamic things with css , if old IE versions are to be considered. u have to opt for jquery.
@Radian For a non JS solution that works in IE8, how about using table and you dynamically create td instead of li — JSFiddle?
Just count the number of elements using the server-side script of your choice and generate the needed «dynamic css»
5 Answers 5
In IE8 you can use text-align-last:justify on the container and display:inline-block on the elements to achieve the evenly spaced effect — it just won’t work in stable Chrome, so you’ll need to make it a fallback with conditional comments so only older IEs use the text-align approach. For some reason IE also requires you to set text-align when setting text-align-last — keep that in mind.
i try your code but not working in IE8 , here is fiddle: jsfiddle.net/LqXH5/2 «please check that in IE8 »
List html li width
Find centralized, trusted content and collaborate around the technologies you use most.
Connect and share knowledge within a single location that is structured and easy to search.
- but even with width:auto it doesn’t work at all, and I don’t know why. I tried to use display:inline-block but this is the same. I don’t know how many tabs I will have so this is why I am not using a percentage directly. I would like to display the list inline when I display the page on a desktop and display one li per line when I am on a smartphone (with media queries). I have this:
ul#menu < margin:0; padding:0; list-style-type:none; width:100%; position:relative; display:block; height:30px; font-size:12px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; /*border-bottom:1px solid #000000; border-top:1px solid #000000;*/ >li.button < background:transparent url(../images/nav_bg.png) repeat-x top left; height:30px; width:auto; >ul#menu li < display:inline-block; margin:0; padding:0; width:auto; >ul#menu li a < display:inline-block; color:#999999; text-decoration:none; font-weight:bold; padding:8px 20px 0 20px; width:auto; >ul#menu li a:hover < color:#FFFFFF; height:22px; background:transparent url(../images/nav_bg.png) 0px -30px no-repeat; >ul#menu li a.current < display:inline-block; height:22px; background:transparent url(images/nav_bg.png) 0px -30px no-repeat; margin:0; >Two thoughts: 1) Why are you using inline-block ? Why not just use block if you want the full width? 2) Have you tried width:100% instead of width:auto
putting width:auto will end up with li which have same width like ul. so it will overwrite the inline-block or block
7 Answers 7
I’ve found this way to deal with single-line full-width ul where an undefined number of li elements need to be spaced out evenly:
Basically, it emulates a table. Works in Gecko, Webkit, IE8+. For IE7 and downwards you should use some inline-block hackery 🙂
If you need to make each cell change its size adaptive to its content, the table-layout can be set to «auto»
Since the li count can change, I can only think of accomplishing this with javascript/jquery as you suggested. Just divide 100 by the # of li’s and set the width on each one.
var width = Math.floor(100 / $("ul#menu li").size()); $("ul#menu li").css('width', width + "%"); You will probably have to play with the width depending on padding and what not.
As a side note, If you haven’t already, I recommend getting a tool like firebug, which will let you edit css and execute js on the fly. It is infinitely useful for fine tuning appearances.
- with the five
- s, you will have to give those
- s a width of 20% each.
Note that you need to change some other details of the CSS if you want to make this work; e.g. with a display:inline-block you make the spaces between the - count, so the total width of the
- content will be more than 100% wide. I’d suggest removing the display:inline-block and giving them float:left .
Edit: Or do you want them to be distributed proportionally according to their contents? That would be a different challenge.
How to set the width of a list, in css
I have the code, as below. It’s a bit annoying to have the text not align (it affects other li elements). How can I make it a fixed-width? I’ve tried width=XYZpx but that did nothing.
In what way does the text not align? Did you assign width: XYZpx; to li.date ? I would think that would work fine for setting the list items to a fixed width.
3 Answers 3
Assuming the following (x)html:
The width of the li elements can be set by either setting the width of the div#navigation (as the ul and li will default to display: block at 100% width + padding + border-widths):
Or by setting the width of the ul
Or by setting the width of the li elements themselves:
div#navigation > ul > li.date
I think, unless there was a major typo in your question, that you’re trying to assign the width incorrectly, certainly as regards the width=XYZpx that you posted. To assign the width this way you should quote the value, so it becomes:
But bear in mind that this is html/xhtml, not css. To set the width with css you should use either:
If you want to use inline-styles, or, in the stylesheet, use the form (as above):
Your comments regarding the text’s alignment suggests that your li elements are perhaps inheriting padding, or a text-indent from somewhere, so you might want to add the styles:
div#navigation > ul > li.date
Hope this helps. If I’ve misunderstood your question, or problem, please feel free to drop a comment to my answer, or revise/edit/clarify your question, and I’ll try to be more useful.
List html li width
Find centralized, trusted content and collaborate around the technologies you use most.
Connect and share knowledge within a single location that is structured and easy to search.
#container < width:100%; overflow:auto; >#container ul < width: 100%; >#container li
By «100% width», I’m guessing what you mean is each li should be as wide as its text, correct? Because ‘width: 100%’ would make each of the li elements as wide as the ul, which is as wide as the container, which I’m guessing is as wide as the screen.
exactly.. the idea is to have li’s width as wide as the screen 😛 It’s easy to get them displayed vertically (with that width) but I would like to have them displayed horizontally.
7 Answers 7
Like the others I’m struggling to understand what you’re looking for exactly but does this do what you want?
Getting the LIs on to one line has two parts. The white-space:nowrap on the ul stops any automatic wrapping and the display:inline-block on the LIs allows them to run one after another, but have widths, paddings and margins set on them. For standards compliant browsers that’s sufficient.
However IE6 and IE7 need special treatment. They don’t support the display:inline-block properly, but fortunately display:inline on elements with hasLayout set gives a behaviour very like display:inline-block. The width:100% has already forced hasLayout to be set on the LIs so all we have to do is to direct the display:inline to IE6 and IE7 only. There are a number of ways of doing this (conditional comments are popular on StackOverflow) but here I’ve chosen the * html and *:first-child+html hacks to do the job.
Additionally, IE6 and IE7 have another bug where the scroll bar overlays the content, so the container is given a padding-bottom to make space for the scroll bar. The scroll bar is a platform control, so its height cannot be known exactly, but 17 pixels seems to work for most cases.
Finally, IE7 also wants to put in a vertical scroll bar, so the overflow-y:hidden directed at IE7 stops this from happening.
(The padding:0, margin:0, list-style:none, and the styles on the individual LIs are just there to show more clearly what’s happening.)