導航鋰標籤的自動寬度

Question

我正在嘗試使我的導航菜單li項目寬度與頁面自動調整大小。這意味着，如果有4個標籤，則4個標籤應該將自己劃分爲屏幕寬度，並且相等。我試着用汽車和100％，但什麼也沒有工作:(

<div class="headercss"> 

    <div class="headerlogo"> 

    </div> 

    <div class="nav"> 

     <ul> 
      <li><a href="#home"> <br>BLINK</a></li> 
      <li><a href="#news"><br>ADVERTISING WITH BLINK</a></li> 
      <li><a href="#contact"><br>EDUCATING WITH BLINK</a></li> 
      <li><a href="#about"><br>ABOUT US</a></li> 
     </ul> 

    </div> 



</div> 

/* BODY */ 

body { 
    margin: 0px; 
    background-color: #000000; 
} 


/* 1. HEADER */ 

.headercss { 
    width: auto; 
    height: 500px; 
    background-color: #000000; 
    border: 1px dashed #ffffff; 
    position: relative; 
} 

.headerlogo { 
    width: 980px; 
    height: 250px; 
    background-color: #272727; 
    border: 1px dashed #ffffff; 
    position: relative; 
    left: 50%; 
    margin-left: -490px; 
} 

.nav { 
    width: 980px; 
    height: 70px; 
    background-color: #272727; 
    border: 1px dashed #ffffff; 
    position: relative; 
    left: 50%; 
    margin-left: -490px; 
} 

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 

li { 
    float: left; 
} 

a:link, a:visited { 
    display: block; 
    height: 68px; 
    width: 244px; 
    font-size: 12px; 
    color: #FFFFFF; 
    border-right: 1px solid #000000; 
    background-color: #272727; 
    text-align: center; 
    text-decoration: none; 
    font-family: 'Raleway', Arial; 
    letter-spacing: 2pt; 
    line-height: 200%; 
} 

a:hover, a:active { 
    background-color: #242424; 
} 

Answer 1

根據你的數量給出寬度的百分比r列表中的項目。

ul{ list-style-type: none; 
     margin: 0; 
     padding: 0; 
     float:left; 
     width:100%; 
     overflow: hidden; 
    } 

li { 
    float: left; 
    width:25%; 
} 

Answer 2

加入這個CSS您ul標籤：

display:table; 
table-layout: fixed; 

，並給你的li CSS：

display: table-cell; 

應該工作:)

Answer 3

您還可以使用顯示：彎曲

.nav ul { 
    display: flex; 
} 
.nav li { 
    flex: 1; 
}