Question

我一直在摆弄导航栏，我无法弄清楚如何使它们居中。我目前正在使用这个from w3schools.com。

我希望可点击的框（主页，新闻，联系人，关于我）位于页面的中心而不是左侧。我该怎么做？

Move To...

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover:not(.active) {
  background-color: #111;
}
.active {
  background-color: #4CAF50;
}

Answer 1

添加

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  padding-left:30em;
}

虽然我建议使用bootstrap。它使工作更容易。

Answer 2

请参阅此fiddle

要使<li>居中，您必须删除为float:left设置的<li>属性。相反，您必须使用display:inline-block。现在，要使<li>居中，请为text-align:center

添加<ul>

按如下方式更改CSS

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  text-align:center;
}
li {
  /* float: left; */
    display: inline-block;
}

Answer 3

答案可能不是使用列表来制作导航栏，而是尝试使用此代码，这很容易理解：

＆＃13;

<style>
#test {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 13px;
}

a {
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

</style>

<body>

<div id='test'>
  <a class="active" href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
</div>

＆＃13;

如何使Nav Bar CSS居中

3 个答案:

请参阅此fiddle