How to keep <li> elements on single line in fixed width <ul>?

Question

I've a header div and a menu ul below it. I'd like to accomplish 2 things:

1) the ul should have the same width as the div (outer vertical borders exactly same x position 2) I'd like to keep the spacing between li elements roughly equal

With some trial and error on the li's margins and padding I roughly achieved the first point in Google Chrome (please see this jsfiddle) but in Firefox the li's don't fit in the ul so they don't stay on a single line. Also, the last li tends to 'spill over' to a second line when zooming in/out.

I tried it with margin:5px auto and padding:5px auto on the li elements but here auto seems to mean zero.

Is this really difficult/impossible or am I overlooking something obvious?

I also tried width:fit-contents but that didn't help either.

Expatiate

remove letter-spacing from ul#mmenu li – Catch

I don't see any difference between FF & CR in your fiddle.. can you post a screenshot explaining the desire behavior? – Kyliekylila

Answer 1

I edited a whole lot in your CSS, check the updated fiddle.

Basicly, this is what I've done:

HTML:

<ul>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
    <li><a href="#">link</a></li>
</ul>

CSS:

ul {
    width: 960px;
    display: table;
    table-layout: fixed;
}
ul li {
    display: table-cell;
}
ul li a {
    display: block;
}

The ul is displayed as a table, with the li's as table-cells, making it as width as the header. Within the li i display the anchors as a block, making them fill the whole li. Hope it suits you.

P.s. make sure you remove the class cf from the ul when you use this.

Saxony

This work fine, although i generally say to people although this is perfectly workable solution, unless your dealing with tabular data, why not use other options – Paralytic

Well, it makes the elements act like an table, not being a table. I don't mind using it like this. It bothers me more when people try to use list or divs to display tabular data. (offtopic) – Saxony

Answer 2

I think some fellow frustrates may find this useful:

.main-menu ul li ul li{
  white-space: nowrap;
}

Lockyer

Answer 3

Like this

ul#mmenu li
{
padding:7px;
}

DEMO

Bicyclic

Answer 4

You'll need to adjust the padding in ul#mmenu I changed the padding to padding:7px 23px; and it stays in a single line,but there will be a blank space at the right end of the last menu.

Harder

Answer 5

You can give absolute position to li items and position them (first have left:0, second: left:100px or so... last have right:0 and so on). That way they will always be at the same place when you zoom.

Quartersaw

Answer 6

For those wanting to avoid CSS table and table-cell, which by the way, I have no probelm with you can use text-align:justify on the UL with a couple of tweaks.

Basic HTML:

<ul id='mmenu'>
   <li><a href='#'>Blah Blah Blah Blah</a></li>
   <li><a href='#'>Blah Blah</a></li>
   <li><a href='#'>Blah Blah Blah Blah</a></li>
   <li><a href='#'>Blah Blah</a></li>
</ul>

Note we've lost the clearfix because: a) We're not going to use floats and b)it breaks this solution.

CSS:

ul#mmenu{
   width:100%;
   margin:15px 0 10px 0;
   overflow:hidden;
   text-align:justify; /*Added this*/
}

ul#mmenu li{
   letter-spacing:.05em;
   color:#0a93cd;
   /*Now inline blocks instead of blocks floated left*/
   display:inline-block; 
   font:24px arial;
   padding:7px 26px;
   background:#fff;
   border-left:2px solid #0a93cd;
   border:2px solid #0a93cd;
   border-radius:13px;
   text-align:center;
}

/*Now for the hacky part....
  ...justify does not, by design, justify the last row of text
  therfore we need to add an additional, invisible line*/
ul#mmenu:after {
   content: "";
   width: 100%;
   display: inline-block;
}

I have also removed the :first-child style in the Updated Fiddle

Dedicate

I need to show more li in single line and if the width in low then it will hide the content with over flow hidden jsfiddle.net/patelmit69/y4ANj/59 – Impossibility