Question

我网站上每个页面的顶部都有一个导航栏。这是HTML和CSS：

HTML

<ul>
    <li><a class="active" href="index.html">Home</a></li>
    <li><a href="shifts.html">Shifts</a></li>
    <li><a href="partFive.html">Part Five</a></li>
    <li><a href="background.html">Background</a></li>
</ul>

CSS

 ul {
    z-index: 100;
    position: fixed;
    list-style-type: none;
    width: 80em;
    height: 3em;
    margin-left: auto;
    margin-right: auto;
    background-color: #333;

}

li {
    float: left;

}

li a {

    display: block;
    color: white;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
    width: 20em;
    margin-right: auto;
    margin-left: auto;
    text-decoration: none;
    overflow: hidden;
}

li a:hover:not(.active) {
    background-color: #111;
}

.active {
    background-color: #87372c;
    box-shadow: 0px 0px 50px #87372c;
    color: #000000;
    font-weight: 800;
    text-shadow: 0 0 10px gold, 0 0 20px gold, 0 0 30px gold, 0 0 40px gold;
}

我还在这里设置了CodePen：https://codepen.io/njpbray/pen/Rerabv

条形图根本没有居中，它的左侧有一个额外的悬挂部分，对悬停没有反应。

我不确定这是怎么回事。我认为制作宽度为80em的东西并将左右边距设置为auto会使它静止居中。我还认为，将80em宽度的条形图细分为20em的4个细分，但是左边有一点。

如果可能的话，我希望将栏固定在顶部。有些页面很长，我希望用户能够在页面上的任何位置访问导航栏。

Answer 1

要集中链接，请从float: left中删除li并将其设置为display: inline-block。然后只需在text-align: center上设置<ul>。

以上内容足以集中各个块，但您的内容仍偏移到页面右侧。要解决此问题，请大幅缩小width的值。 em基于字体大小，这对于文本来说是一个很好的策略，而对width来说是一个糟糕的选择。您可以使用百分比表示响应速度，也可以使用固定的px单位，具体取决于您希望链接的“缩进”程度。我在示例中使用了100px作为链接。

在使用<ul>元素时，您还希望通过在padding: 0上设置ul来删除默认填充。这会删除您看到的左侧“偏移”。

最后，不要忘记在margin: 0上设置body来消除边缘周围的8px空白。

这一切都可以在下面看到：

body {
  margin: 0;
}

ul {
  z-index: 100;
  position: fixed;
  list-style-type: none;
  width: 100%;
  height: 3em;
  margin-left: auto;
  margin-right: auto;
  background-color: #333;
  text-align: center;
  padding: 0;
}

li {
  display: inline-block;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding-top: 1em;
  padding-bottom: 1em;
  width: 100px;
  margin-right: auto;
  margin-left: auto;
  text-decoration: none;
  overflow: hidden;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #87372c;
  box-shadow: 0px 0px 50px #87372c;
  color: #000000;
  font-weight: 800;
  text-shadow: 0 0 10px gold, 0 0 20px gold, 0 0 30px gold, 0 0 40px gold;
}

<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="shifts.html">Shifts</a></li>
  <li><a href="partFive.html">Part Five</a></li>
  <li><a href="background.html">Background</a></li>
</ul>

Answer 2

您已在代码中将位置设置为固定。您想要将其设置为居中。

ul {
    z-index: 100;
    position: center;
    list-style-type: none;
    width: 80em;
    height: 3em;
    margin-left: auto;
    margin-right: auto;
    background-color: #333;

}

https://codepen.io/anon/pen/dgGMva

我想您可能会对通过w3shcools的CSS教程感兴趣。您将从中受益匪浅：

https://www.w3schools.com/Css/

Answer 3

处理您要实现的目标的更好方法是将顶部条包装在一个元素中，该元素占据浏览器的整个宽度100%，并且其position属性设置为fixed并添加列表作为子元素。第一个链接左侧的空格是由于body标签在默认情况下具有一些边距和填充这一事实。您必须删除它。 ul元素的空格和边距也相同

html, body {
  margin: 0;
  padding: 0;
}
header {
  width: 100%;
  position: fixed;
  background-color: blue;
}
ul {
    z-index: 100;
    list-style-type: none;
    width: 80em;
    height: 3em;
    margin: 0 auto;
    padding: 0;
    background-color: #333;

}
li {
    float: left;

}

li a {

    display: block;
    color: white;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
    width: 20em;
    margin-right: auto;
    margin-left: auto;
    text-decoration: none;
    overflow: hidden;
}
li a:hover:not(.active) {
    background-color: #111;


}

.active {
    background-color: #87372c;
    box-shadow: 0px 0px 50px #87372c;
    color: #000000;
    font-weight: 800;
    text-shadow: 0 0 10px gold, 0 0 20px gold, 0 0 30px gold, 0 0 40px gold;

}

<header>
  <ul>
    <li><a class="" href="index.html">Home</a></li>
    <li><a href="shifts.html">Shifts</a></li>
    <li><a href="partFive.html">Part Five</a></li>
    <li><a href="background.html">Background</a></li>
  </ul>
</header>

Answer 4

最好使用CSS3和display：flex而不是float：left和inline-block

<header>
  <ul>
    <li><a class="active" href="index.html">Home</a></li>
    <li><a href="shifts.html">Shifts</a></li>
    <li><a href="partFive.html">Part Five</a></li>
    <li><a href="background.html">Background</a></li>
  </ul>
</header>

<main>
</main>

body {
  margin: 0;
  padding: 0;
}

header {
  display: flex;
  justify-content: center;
}

ul {
  background-color: #333;
  display: flex;
  list-style-image: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: fixed;
  z-index: 100;
}

li a {
  align-items: center;
  color: white;
  display: flex;
  justify-content: center;
  padding-top: 1em;
  padding-bottom: 1em;
  text-decoration: none;
  width: 20em;
}
li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #87372c;
  box-shadow: 0px 0px 50px #87372c;
  color: #000000;
  font-weight: 800;
  text-shadow: 0 0 10px gold, 0 0 20px gold, 0 0 30px gold, 0 0 40px gold;
}

main {
  height: 1500px;
}

thanks Kevin Adistambha

Answer 5

如前所述：几乎所有相关的网络浏览器都支持CSS3和flex-box。改用它。这是一个学习链接。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

居中导航栏CSS

5 个答案: