如何在HTML標頭中均勻分佈列表項內容並居中？

我目前在我的HTML中有一個標題，它是一個帶有列表項目的無序列表display = inline。我試圖完成的是將5個物品中的每一個散佈到相等的空間中（每個物品20％的寬度），並將它們分散在它們各自的空間中間。我能夠在頁腳上輕鬆完成此操作，但是我不是使用列表項目，而是使用Divs作爲每個選項。任何人都可以幫我做同樣的清單嗎？我可以重做它作爲Divs，但我想至少知道如何使清單工作。如何在HTML標頭中均勻分佈列表項內容並居中？

How it should be

html, body { 
 
    margin:0; 
 
\t padding:0; 
 
\t height:100%; 
 
} 
 

 
a:link { 
 
\t text-decoration:none; 
 
} 
 

 
#page { 
 
\t position:relative; 
 
\t background:#E9EAEE; 
 
\t min-height:100%; 
 
} 
 

 
#header { 
 
\t position:fixed; 
 
\t left:0px; 
 
\t top:0px; 
 
\t z-index:1; 
 
\t width:100%; 
 
\t background-color:#3f5c99; 
 
\t padding-top:10px; 
 
} 
 

 
#header .holder { 
 
\t width:100%; 
 
\t float:left; 
 
} 
 

 
#header a { 
 
\t color:#ffffff; 
 
\t font-size:11px; 
 
\t font-weight: bold; 
 
\t padding:0px 10px 0 0; 
 
\t text-transform:uppercase; 
 
} 
 

 
#header li { 
 
\t display:inline; 
 
\t margin-left:-10px; 
 
\t padding:0 4px 0 6px; 
 
\t border-left: 1px solid #2F477A; 
 
} 
 

 
.logo { 
 
\t border-radius:2px; 
 
}

<body> 
 
    <div id="page"> 
 
    <div id="header"> 
 
     <div class="holder"> 
 
     <ul> 
 
      <li style="border-left:0px;"><a href="index.html"><img class="logo" src="../img/logo.png"/></a></li> 
 
      <li><a href="../pt_br/comics.html">Comics</a></li> 
 
      <li><a href="../pt_br/links.html" title="Links Favoritos"><img src="../img/friendOff.png"/></a></li> 
 
      <li><a href="mailto:[email protected]" title="Fale Comigo"><img src="../img/mailChatOff.png"/></a></li> 
 
      <li><a href="../wp/index.php" title="Meu Wordpress"><img src="../img/globeOff.png"/></a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    ... 
 
    </div> 
 
</body>

我希望我能夠說明什麼，我試圖完成，但如果還不清楚，請讓我知道。預先感謝您的幫助。

來源

2015-10-13 Hawk

你可以嘗試這樣的，我希望它會幫助你。

html, body { 
 
    margin:0; 
 
    padding:0; 
 
    height:100%; 
 
} 
 

 
a:link { 
 
    text-decoration:none; 
 
} 
 

 
#page { 
 
    position:relative; 
 
    background:#E9EAEE; 
 
    min-height:100%; 
 
} 
 

 
#header { 
 
    position:fixed; 
 
    left:0px; 
 
    top:0px; 
 
    z-index:1; 
 
    width:100%; 
 
    background-color:#3f5c99; 
 
    
 
} 
 

 
#header .holder { 
 
    width:100%; 
 
    float:left; 
 
} 
 

 
#header ul { 
 
    display: table; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 

 

 
#header a { 
 
    color: #ffffff; 
 
    display: inline-block; 
 
    font-size: 11px; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
} 
 

 
#header li { 
 
    display: table-cell; 
 
    padding: 5px 0; 
 
    position: relative; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    width: 20%; 
 
} 
 
#header li:after { 
 
    border-left: 1px solid #2f477a; 
 
    content: ""; 
 
    height: 20px; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 8px; 
 
} 
 
.logo { 
 
    border-radius:2px; 
 
}

<body> 
 
    <div id="page"> 
 
    <div id="header"> 
 
     <div class="holder"> 
 
     <ul> 
 
      <li style="border-left:0px;"><a href="index.html"><img class="logo" src="../img/logo.png"/></a></li> 
 
      <li><a href="../pt_br/comics.html">Comics</a></li> 
 
      <li><a href="../pt_br/links.html" title="Links Favoritos"><img src="../img/friendOff.png"/></a></li> 
 
      <li><a href="mailto:[email protected]" title="Fale Comigo"><img src="../img/mailChatOff.png"/></a></li> 
 
      <li><a href="../wp/index.php" title="Meu Wordpress"><img src="../img/globeOff.png"/></a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    ... 
 
    </div> 
 
</body>

來源

2015-10-13 06:29:17

這工作得很好！非常感謝！在這種情況下，我並不知道顯示器：表格......我會嘗試更多地瞭解它是如何工作的。再次感謝！ – Hawk

這是我的榮幸。 –

ul { 
    display: flex; 
} 

#header li { 
    ... 
flex: 1; 
display: flex; 
align-items: center; 
justify-content: center; 
... 
}

https://jsfiddle.net/234zzgn7/

添加這個CSS。當然這是使用flexbox，這是我發現非常棒的東西。但是你應該調查你的用戶是否支持它。

http://caniuse.com/#search=flexbox

來源

2015-10-13 06:20:15 Paran0a

似乎工作的偉大......但我試圖把重點此網站是移動和從我讀，一些Android瀏覽器版本不完全支持Flexbox的.. 。但是，總能找到替代這些問題的很好的方法......非常感謝！ – Hawk

這裏試試這個。改變是#header li和#header a

html, body { 
 
    margin:0; 
 
\t padding:0; 
 
\t height:100%; 
 
} 
 

 
a:link { 
 
\t text-decoration:none; 
 
} 
 

 
#page { 
 
\t position:relative; 
 
\t background:#E9EAEE; 
 
\t min-height:100%; 
 
} 
 

 
#header { 
 
\t position:fixed; 
 
\t left:0px; 
 
\t top:0px; 
 
\t z-index:1; 
 
\t width:100%; 
 
\t background-color:#3f5c99; 
 
\t padding-top:10px; 
 
} 
 

 
#header .holder { 
 
\t width:100%; 
 
\t float:left; 
 
} 
 

 
#header a { 
 
\t color:#ffffff; 
 
\t font-size:11px; 
 
\t font-weight: bold; 
 
\t padding:0px 10px 0 0; 
 
\t text-transform:uppercase; 
 
    display:block; 
 
    width:100%; 
 
    box-sizing:border-box; 
 
} 
 

 
#header li { 
 
\t display:inline-block; 
 
    box-sizing:border-box; 
 
    width:20%; 
 
\t margin-left:-10px; 
 
\t padding:0 4px 0 6px; 
 
\t border-left: 1px solid #2F477A; 
 
} 
 

 
.logo { 
 
\t border-radius:2px; 
 
}

<body> 
 
    <div id="page"> 
 
    <div id="header"> 
 
     <div class="holder"> 
 
     <ul> 
 
      <li style="border-left:0px;"><a href="index.html"><img class="logo" src="../img/logo.png"/></a></li> 
 
      <li><a href="../pt_br/comics.html">Comics</a></li> 
 
      <li><a href="../pt_br/links.html" title="Links Favoritos"><img src="../img/friendOff.png"/></a></li> 
 
      <li><a href="mailto:[email protected]" title="Fale Comigo"><img src="../img/mailChatOff.png"/></a></li> 
 
      <li><a href="../wp/index.php" title="Meu Wordpress"><img src="../img/globeOff.png"/></a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    ... 
 
    </div> 
 
</body>

來源

2015-10-13 06:21:39

這也適用，但由於某種原因（可能是我的代碼上的東西），它會拋出其中一個項目到第二行...不知道是否由於我的填充，邊距或邊框它認爲5個項目的寬度爲20％大於100％。將着眼於它來找到造成這個錯誤的原因。：D – Hawk

更新：@XahedKamal，對不起，這確實是我的不好，這是我的代碼問題，我有一個壞標記...因此，這個解決方案也很好！謝謝一堆！：D – Hawk

如何在HTML標頭中均勻分佈列表項內容並居中？

回答

相關問題