如何在 HTML header 中均匀分布列表项内容并居中？

Question

我目前在我的 HTML 中有一个 Header，它是一个无序列表，列表项显示为内联。我想要完成的是将 5 个项目中的每一个展开成一个相等的 space（每个 20% 宽度）并将它们集中在各自的 space 中。我能够在页脚上轻松完成此操作，但我没有使用列表项，而是为每个选项使用了 Div。谁能帮我对列表做同样的事情？我可以将其重做为 Divs，但我想至少知道如何使列表正常工作。

How it should be

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;
 padding-top:10px;
}

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

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

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

.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:d.farielo@gmail.com" 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>

我希望我能够说明我正在努力完成的事情，但如果仍然不清楚，请告诉我。在此先感谢您的帮助。

Answer 1

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

Answer 2

在这里试试这个。 #header li 和 #header a

有变化

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;
 padding-top:10px;
}

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

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

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

.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:d.farielo@gmail.com" 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>

Answer 3

你可以这样试试，希望对你有帮助

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:d.farielo@gmail.com" 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>

如何在 HTML header 中均匀分布列表项内容并居中？

How to spread list item content evenly and centered in HTML header?

html

css

header

spacing

html-lists