How to display inline several
with 100% width?

Question

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.

Alohci · Accepted Answer

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

Chris Sattinger · Answer

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

}

How to display inline several <li> with 100% width?

Tags:

html

css

horizontallist

Rui

2 Answers

Alohci

Chris Sattinger

Recent Activity

Donate For Us