Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Making an unordered list stretch horizontally so as to always fill up a div

Sorry about this, I thought this issue was resolved, but then it turned out that it wasn't.

I have an unordered list inside a div, and I want the list to always fill up the entire div horizontally, no matter what the zoom level. How does one go about this? Set the width of each list item individually? I tried this, and the widths of my items do add up to 100%, yet the list still does not fill up the div. I'm modifying a template, too, so much of the HTML is hidden from me, but I can edit CSS all I want to. What else can I do in terms of CSS? Padding? Something involving the calc function? I've experimented with all of these, but somehow nothing seems to work.

Are there any other ideas as to how this can be done?

like image 884
Mhoram Avatar asked Sep 12 '13 05:09

Mhoram


People also ask

How do I display an unordered list horizontally?

For displaying the unordered lists in horizontal style we can make use of display: inline; property. The Display property in CSS defines how the components(div, hyperlink, heading, etc) are going to be placed on the web page.

How do I stretch a div horizontally in CSS?

The width property is used to fill a div remaining horizontal space using CSS. By setting the width to 100% it takes the whole width available of its parent. Example 1: This example use width property to fill the horizontal space. It set width to 100% to fill it completely.

How can unordered list can be used to design horizontal navigation?

If you want to make this navigational unordered list horizontal, you have basically two options: Make the list items inline instead of the default block. .li { display: inline; } This will not force breaks after the list items and they will line up horizontally as far as they are able.

How do I make a horizontal list unordered in HTML?

By default, the HTML <ul> list will be rendered vertically with one list item on top of another. When you need to create a list that expands horizontally, you need to add the display:inline style to the <li> elements of the list.


2 Answers

Try this

 ul { padding:0; margin:0; white-space:nowrap; }
 li { width: 100%; list-style-type:none; display:inline-block; }

or

ul {
  width: 100%;
  display: table;
  table-layout: fixed;
}

ul li {
  display: table-cell;
  width: auto;
  text-align: center;
}
like image 143
Sobin Augustine Avatar answered Nov 15 '22 22:11

Sobin Augustine


The browser support is a bit iffy, but if you want your list items to always take up the full width of their container, you can use a combination of display: table and display: table-cell with your list items:

ul {
    display: table;
}

li {
    display: table-cell;
}
like image 39
Nightfirecat Avatar answered Nov 16 '22 00:11

Nightfirecat