How to display inline multiple <li> with 100% width?
I have the following html:
<div id="container"> <ul> <li>element 1</li> <li>element 2</li> </ul> </div> applied using css as follows:
#container { width:100%; overflow:auto; } #container ul { width: 100%; } #container li { width: 100%; } So now I want to have an indefinite number of elements ( <li> ) with 100% width (therefore, they can be adjusted depending on the size of the browser window), but all side by side, displaying a horizontal scroll bar in the container.
I tried putting "display: inline" on ul css and "float: left" on li css, but without success.
Any suggestions?
Also, try to think that I'm trying to make it as “cross-browser compatible” as possible.
Thanks in advance.
Like others, I'm struggling to figure out what you are looking for, but does this do what you want?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Horizontal 100% LIs</title> <style type="text/css"> #container { width:100%; overflow:auto;} #container ul { padding:0; margin:0; white-space:nowrap; } #container li { width: 100%; list-style-type:none; display:inline-block; } * html #container li { display:inline; } /* IE6 hack */ * html #container { padding-bottom:17px;} /* IE6 hack */ *:first-child+html #container li { display:inline; } /* IE7 hack */ *:first-child+html #container { padding-bottom:17px; overflow-y:hidden; } /* IE7 hack */ </style> </head> <body> <div id="container"> <ul> <li style="background-color:red">element 1</li><li style="background-color:green">element 2</li><li style="background-color:blue">element 3</li> </ul> </div> </body> </html> Obtaining LI on one line consists of two parts. White space: nowrap on ul stops any automatic packaging and display: the built-in block on LI allows them to run one after the other, but widths, paddings and fields are set on them. For standards compliant browsers.
However, IE6 and IE7 need special handling. They do not support display: the inline block is correct, but fortunately displays: inline on elements with hasLayout set gives a behavior very similar to display: inline-block. Width: 100% has already made hasLayout installed on LI, so all we need to do is direct the display: only build in IE6 and IE7. There are several ways to do this (conditional comments are popular on StackOverflow), but here I chose html and *: first-child + html hacks to do the job.
In addition, in IE6 and IE7 there is another error when the scrollbar overlays the content, so the bottom of the strip is provided for the container to fill the scrollbar. The scrollbar is the control of the platform, so its height cannot be precisely determined, but 17 pixels seems to work in most cases.
Finally, IE7 also wants to place a vertical scrollbar, so overflow-y: hidden, aimed at IE7, stops this.
(Filling: 0, margin: 0, list-style: none, and styles on separate LIs only to more clearly show what is happening.)
You want it to act like an old old-fashioned table:
<ul class="menu"> <li>one</li> <li>two</li> <li>three</li> </ul> .menu { display: table; width: 100%; } .menu li { display: table-cell; padding: 2px; background: #900990; border: 1px solid yellow; color: white; } then you can also easily break it when the page is small:
/* responsive smaller screen turn into a vertical stacked menu */ @media (max-width: 480px) { .menu, .menu li { display: normal; } } What you are trying to do is similar to what the cells of the table do, and it is impossible otherwise without using JavaScript (however, I do not suggest using tables or JavaScript for this). It’s best to set a certain amount of horizontal indentation in the <li> tags and float them so that they are automatic width based on their width of the content and not the width of the window:
<div id="container"> <ul> <li>element 1</li> <li>element 2</li> </ul> </div> <style type="text/css"> #container, #container ul { width: 100%; float: left; } #container ul li { margin: 0 10px 0 0; padding: 5px 10px; float: left; } </style> Another method is to use display: inline-block; to achieve what you want, but it's a kind of hack (not compatible with cross-browser).
using jquery to place your leader after your page
var ul = $('#yourListId'); var numChildren = ul.children().length; if(numChildren <= 0){ return; } ul.css({'list-style':'none','margin':0,'padding':0}); var parentWidth = ul.width(); var childWidth = parentWidth/numChildren; ul.children().each(function(index, value){ $(this).css({'width':childWidth,'margin':0,'float':'left','display':'inline-block'}); }); ul.after('<div style="clear:both">'); With the exception of "childWidth" css ... you can, of course, replace the other css with something from the stylesheet.
In general, to show li horizontally, you will leave everything to the left. The part that bothers me is 100% of the width. How can anyone have a width of 100% when they can only be wider than their container? It seems that li needs to fix the width or authorize without any width.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <style type="text/css"> #container { width:100%; overflow:auto; } #container ul { width: 100%; } #container li { float:left; } </style> </head> <body> <div id="container"> <ul> <li>element 1</li> <li>element 2</li> </ul> </div> </body> </html> I think that what you want to do is not possible in the cross browser css and html; if you set the width of li to 100%, you set its width to your parent, and you really need the parent ( ul ) to have the width of the whole combination. And you cannot set the width x-times the width of the screen using only css.
And even if you could do it, it would also increase, as said, that it is 100% of its parent element. Type of chicken and egg problem for browser.
In javascript, it's easy, just calculate the number of li, set their width to the width of the screen, and set the width to ul (number of litas) x (screen width).