Login/Register
How to display inline several <li> with 100% width?
Asked Answered
Solved htmlcsshorizontallist
B

7

6

I have the following html:

<div id="container">
  <ul>
    <li>element 1</li>
    <li>element 2</li>
  </ul>
</div>

applied with a css as follows:

#container { width:100%; overflow:auto; }
#container ul { width: 100%; }
#container li { width: 100%; }

So now I would like to have an indeterminate number of elements (<li>) all with 100% width (so they can adjust accordingly to the browser's window size) but all side by side, displaying the horizontal scroll bar in the container.

I have tried putting "display:inline" on ul's css, and "float:left" on li's css, but with no success.

Any suggestions?

Also, try to consider I'm trying to make this as "cross-browser compatible" as possible.

Thanks in advance.

Brookweed answered 12/3, 2010 at 16:47 Comment(2)
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. – Relique
exactly.. the idea is to have li's width as wide as the screen :P It's easy to get them displayed vertically (with that width) but I would like to have them displayed horizontally. – Brookweed
A
13

Like the others I'm struggling to understand what you're looking for exactly 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>

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.)

Amelioration answered 12/3, 2010 at 22:10 Comment(0)
S
4

You want it to act like a good 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 collapse it nicely when the page is small:

/* responsive smaller screen turn into a vertical stacked menu */
@media (max-width: 480px) {

   .menu, .menu li {
       display: normal;
    }

}
Selfassured answered 3/4, 2013 at 22:19 Comment(0)
G
1

What you're trying to do resembles what table cells do and is impossible otherwise, without using JavaScript (I don't suggest using tables or JavaScript for this, however). Your best bet is to set a certain amount of horizontal padding on the <li> tags and float them so that they are auto-width based on their content's width instead of the window's width:

<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>

The other method is to use display: inline-block; to achieve what you want, but it's kind of a hack (not cross-browser compatible).

Gameto answered 12/3, 2010 at 17:3 Comment(0)
F
1

using jquery to space your li's after your page has 

  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 the "childWidth" css... you can, of course, replace the other css with something from a style sheet.

Find answered 6/4, 2012 at 22:34 Comment(0)
P
0

Try this

<div id="container">
  <ul>
    <li>element 1</li>
    <li>element 2</li>
  </ul>
</div>


   #container { width:100%;  }
   #container ul { text-align:center; }
   #container li { display:inline; text-align:center;padding-left:20px; padding-right:20px; }
Plantaineater answered 12/3, 2010 at 16:53 Comment(3)
This doesn't work. li's width get's reduced to it's content size instead. – Brookweed
nop.. it just centers the two elements side by side, with the width limited by the size of their content plus 40px of padding. – Brookweed
I guess i'm not understanding what your looking for then. – Plantaineater
F
0

Generally to show li's horizontally you would float them all left. The part that confuses me is the 100% width. How can each li have 100% width when they can only be as wide as their container? It seems like the li's need to be fixed width or autosized with no width at all.

<!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>
Fitts answered 12/3, 2010 at 16:58 Comment(3)
If you give each li 100% it will fill the parent container. so if the ul is 200px, the li should be 200px. – Plantaineater
Alright, I think I understand what you want but the way I would do that is to use JavaScript. Is that an option for you? – Fitts
You shouldn't answer a question with another question. – Fontana
E
0

I think that what you want to do is not possible in cross-browser css and html; if you set the width of the li to 100%, you set it to the width of its parent element and what you really need is for the parent element (the ul) to have the width of all li's combined. And you cannot set the width to x-times the screen width using just css.

And even if you could, it would also grow the li's as the are told to be 100% of its parent element. Sort of a chicken and egg problem for the browser.

In javascript is's easy though, just calculate the number of li's, set their width to the screen width and set the ul width to (the number of li's) x (screen width).

Eiffel answered 12/3, 2010 at 17:20 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.