Positioning of li’s on the page

Question

I would like to make my li spread evenly across the page width.

How can I do this with css?

Answer 1

You can use the property display: table, example:

ul.menu{
  width:100%;
  padding:0;
  display: table;
 }
 ul.menu li {
   background-color:gray;
   display: table-cell;
 }
ul.menu li a{
  display:block;
  padding:5px;
  text-align:center;
}

<ul class="menu">
  <li><a href="#">LINK</a></li>
  <li><a href="#">LINK</a></li>
  <li><a href="#">LINK</a></li>
  <li><a href="#">LINK</a></li>
  <li><a href="#">LINK</a></li>
</ul>

Answer 2

You can use Flexbox. Most of browsers has a well-consolidated implementation, according to the Can I Use.

I’m assuming that your list will be horizontal, meaning the <li>will be next to each other. The secret is to declare your <ul>, which is your container as display: flex, and in <li>s set the property flex-grow: 1. This property defines the possibility of an item flex grow if necessary. Defining it as 1, all the remaining space of the container will be distributed equally among your children.

Behold:

$('button').on('click', function(){
  $('ul').append('<li>Teste</li>');
});

ul{
  margin:0;
  padding: 0;
  width: 100%;
  display: flex;
}

li{
  background-color: yellow;
  border: 1px solid black;
  padding: 10px;
  list-style: none;
  flex-grow: 1;
}

button{
  margin-bottom: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Adicionar LIs</button>

<ul>
  <li>Teste</li>
  <li>Teste</li>
</ul>

Obviously, this code must be appropriate to your needs.

Answer 3

If you know the exact number of <li>'s then use the code below, adjusting the percentage to match the 100%:

<style>
    li {            
        display: inline-block;
        width: 20%;
        float: left;
    }
</style>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

Answer 4

body {
 margin:0; 
}
ul {
 padding: 0;
 width: 100%;
 font-size: 0;
}
li {
  box-sizing: border-box;
  text-align: center;
  font-size: 16px;
  border: 1px solid;
  width: 33.33%;
  padding: 10px;
  display: inline-block;
}

<ul>
  <li>OLÁ</li>
  <li>HELLO</li>
  <li>HOLA</li>
</ul>

EXPLANATION:

1. We define the parent element (in this case ul) as having the page length (width: 100%)
2. font-size:0;: this serves so that there are no margins in the child elements that have as display inline-block, our <li>
3. we divide 100 (100%) by the total number of <li>, this will give us the length of each relative to the parent element... which is the length of the window