如何在html中劃分3個相等部分li

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錯誤，從relative改變float到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; 
}