CSS - Horizontal Navigation List Items to Fill All Available Space

CSS - horizontal navigation list items to fill all available space

Treat it as table:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="utf-8" />
    <style>
        nav {width: 500px;}
        nav ul {
            list-style: none;
            margin:0;
            padding:0;
            display: table;
            background: red;
            width: 100%;
        }
        nav li {
            z-index:10;
            text-align: center;
            display: table-cell;
        }
        nav a {
            color: #fff;
            text-decoration: none;
            padding: 0 10px 0;
            height: 20px;
            line-height: 20px;
            display: block;
            text-align: center;
            background: blue;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Lorem</a></li>
            <li><a href="#">ipsum</a></li>
            <li><a href="#">dolor</a></li>
            <li><a href="#">sit</a></li>
            <li><a href="#">amet</a></li>
        </ul>
    </nav>
</body>
</html>

http://jsfiddle.net/SURzu/

Horizontal List - Evenly fill space

CSS3 Flexbox will do that using display:flex in ul and flex:1 in li, the magin is in flex:1 which is shorthand for flex-grow /flex-shrink/flex-basis, so longhanded is flex:1 0 auto.
Having flex-grow:1 means it will grow evenly to its siblings .

UPDATE

After Op's comment

jsfiddle.net/9hh86/547 could this be done using flexbox instead?

you can use justify-content:space-between in ul

How to make a div fill a remaining horizontal space?

This seems to accomplish what you're going for.

#left {  float:left;  width:180px;  background-color:#ff0000;}#right {  width: 100%;  background-color:#00FF00;}

<div>  <div id="left">    left  </div>  <div id="right">    right  </div></div>

How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container

The modern way to distribute items evenly is to set the following two declarations on the container element:

.container {
  display: flex; /* (1) */
  justify-content: space-between; /* (2) or space-around or space-evenly */ 
}

The value to use for justify-content depends on which kind of even distribution is needed.

Sample Image

See MDN

ul {
  list-style: none;
  padding: 0;
  width: 90vw;
  border: 3px solid gold;
  display: flex;
}
a {
  background: gold;
}
ul {
  justify-content: space-between;
}
ul ~ ul {
  justify-content: space-around;
}
ul ~ ul ~ ul {
  justify-content: space-evenly;
}

<h3>justify-content: space-between; </h3>

<ul id="nav">
  <li><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">BASIC SERVICES</a></li>
  <li><a href="#">OUR STAFF</a></li>
  <li><a href="#">CONTACT US</a></li>
</ul>
<div>Distributes items evenly. The first item is flush with the start, the last is flush with the end </div>
<hr>
<h3>justify-content: space-around;</h3>
<ul id="nav">
  <li><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">BASIC SERVICES</a></li>
  <li><a href="#">OUR STAFF</a></li>
  <li><a href="#">CONTACT US</a></li>
</ul>
<div>Distribute items evenly. Items have a half-size space on either end</div>
<hr>
<h3>justify-content: space-evenly;</h3>
<ul id="nav">
  <li><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">BASIC SERVICES</a></li>
  <li><a href="#">OUR STAFF</a></li>
  <li><a href="#">CONTACT US</a></li>
</ul>
<div>Distribute items evenly. Items have equal space around them</div>
<hr>

How can i make list items in a horizontal container fill the entire container evenly without spacing between?

Remove all extern padding/margin then use flex:1 and padding within li:

.wrapper {  margin-top: 30px;  border: 1px solid lightblue;  width: 100%;}
ul {  padding:0;  margin:0;  display: flex;  flex-wrap: wrap;}
li {  color: black;  flex:1;  text-align:center;  padding:10px 0;  cursor: pointer;  list-style: none}
li:hover {  background-color: lightblue;  color: white;}

<div class="wrapper">  <ul>    <li>123</li>    <li>ABC</li>    <li>789</li>    <li>XYZ</li>  </ul></div>

Full width horizontal nav bar with evenly spaced items

With a static number of elements it's easy - http://jsfiddle.net/X56cJ/

However, if you want to have uniform spacing between the text, not the elements themselves - it becomes tricky. Again, if the number of elements doesn't change, you do it with css classes and static widths. Otherwise it'll have to be javascript

EDIT: Here's the JavaScript way of getting same space between elements.

HTML:

<ul class="menu">
    <li>About Us</li>
    <li>Our Products</li>
    <li>FAQs</li>
    <li>Contact</li>
    <li>Login</li>
</ul>

JS:

function alignMenuItems(){
    var totEltWidth = 0;
    var menuWidth = $('ul.menu')[0].offsetWidth;
    var availableWidth = 0;
    var space = 0;

    var elts = $('.menu li');
    elts.each(function(inx, elt) {
        // reset paddding to 0 to get correct offsetwidth
        $(elt).css('padding-left', '0px');
        $(elt).css('padding-right', '0px');

        totEltWidth += elt.offsetWidth;
    });

    availableWidth = menuWidth - totEltWidth;

    space = availableWidth/(elts.length);

    elts.each(function(inx, elt) {
        $(elt).css('padding-left', (space/2) + 'px');
        $(elt).css('padding-right', (space/2) + 'px');
    });
}

Full example here

Horizontal List That Evenly Divides Remaining Space via CSS

You can use display: flex

.list-inline {
  display: flex;
}

.list-inline li {
  flex: 1;

  text-align: center;
}

Horizontal list items - fit to 100% with even spacing

The new CSS flexbox specification would be the solution to your problem :)

ul {    display: flex;    align-items: stretch; /* Default */    justify-content: space-between;    width: 100%;    background: #cacaca;    margin: 0;    padding: 0;}li {    display: block;    flex: 0 1 auto; /* Default */    list-style-type: none;    background: #fafafa;}

<ul>    <li>This is menu item 1</li>    <li>Number 2</li>    <li>Item Number 3</li>    <li>Menu 4</li></ul>

CSS Make Horizontal List Contents Fill Height

Line-height is the way to go. Just set the list items line height to the same height of the container (the ul in this case)

#navmenu ul li {
display:inline;
padding: 0 8px;
height: 100%;
border-right: solid 1px black;
    line-height: 42px;
}

If you want the black lines to get to border of the ul just set the list items to inline block:

#navmenu ul li {
display:inline-block;
padding: 0 8px;
height: 100%;
border-right: solid 1px black;
    line-height: 42px;
}

Fiddle here: http://jsfiddle.net/gleezer/K4ZGg/1/

EDIT: As the OP requested that the link would be selectable for the entire height:

#navmenu ul li a{
   line-height: 42px;
   display: inline-block;
}

We need to make the entire anchor span the whole height of the list item. Same trick as above: line height to span the full height.

Fiddle here: http://jsfiddle.net/gleezer/K4ZGg/5/

CSS - Horizontal Navigation List Items to Fill All Available Space