как разделить 3 равных части li в html

Question

Привет в приведенном ниже коде, как разделить пространство на весь список iteams, и он должен быть центром. за исключением дома, как разделить 3 равные части

ожидаемый результат: Начало | О проекте | Услуги

#section ul { 
 
    \t width: 1050px; 
 
    \t margin: 1px auto 0 auto; 
 
    \t height: 50px; 
 
    \t padding: 0; 
 
    \t float: relative; 
 
    \t border-style: solid; 
 
     border-width: 1px; 
 
    \t background-color: #556B2F; 
 
    } 
 

 
    #section ul li { 
 
    \t position: relative; 
 
    \t list-style-type: none; 
 
     display: inline; 
 
    } 
 

 
    #section li:before { 
 
    \t content: " | "; 
 
    } 
 

 
    #section li:first-child:before { 
 
     content: none; 
 
    } 
 
    

<div id="section"> 
 
    \t <ul> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Service</a></li> 
 
     </ul> 
 
    </div>

Answer 1

Вы можете использовать display:table & display:table-cell растянуть элементы списка в равной ширина.

#section ul { 
 
    width: 100%; 
 
    max-width: 1050px; 
 
    margin: 1px auto 0 auto; 
 
    height: 50px; 
 
    padding: 0; 
 
    /* float:relative*/ 
 
    /* NO Such Property */ 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    //background-color:#556B2F; 
 
    display: table; 
 
    text-align: center; 
 
} 
 
#section ul li { 
 
    list-style-type: none; 
 
    display: table-cell; 
 
    border-style: solid; 
 
    border-width: 1px; 
 
    vertical-align: middle; 
 
} 
 
#section ul li a { 
 
display: block; 
 
}

<div id="section"> 
 
    <ul> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">About</a> 
 
    </li> 
 
    <li><a href="#">Service</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 2

У Вас есть ошибка в вашем CSS, изменить float от relative до left:

#section ul{ 
    width: 1050px; 
    margin: 1px auto 0 auto; 
    height:50px; 
    padding:0; 
    float: left; // change this, or simply remove because of `display: inline;` for `#section ul li` 
    border-style: solid; 
    border-width: 1px; 
    background-color:#556B2F; 
}