Question

如何将导航栏居中，但仍然显示为网站顶部的一行？我知道我必须在构建li的css文件中更改一些内容，但我无法弄明白。代码是：

<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="index.html">Tab 1</a></li>
  <li><a href="index.html">Tab 2</a></li>
  <li><a href="index.html">Tab 3</a></li>
  <li><a href="index.html">Tab 4</a></li>
</ul>

css文件就像：

ul {
  display: inline-block;
  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: #791519;
}

Answer 1

我会将它包装在NAV标签中并在NAV标签上设置text-align to center。

nav {
  text-align:center;
}
ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  margin:0 auto;

}


<nav>
<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="index.html">Tab 1</a></li>
  <li><a href="index.html">Tab 2</a></li>
  <li><a href="index.html">Tab 3</a></li>
  <li><a href="index.html">Tab 4</a></li>
</ul>
</nav>

Example

Answer 2

我建议使用Flex Box：

＆＃13;

ul {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  list-style-type: none;
  width:100%;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li{
  flex-grow: 1;
}

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: #791519;
}

＆＃13;

<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="index.html">Tab 1</a></li>
  <li><a href="index.html">Tab 2</a></li>
  <li><a href="index.html">Tab 3</a></li>
  <li><a href="index.html">Tab 4</a></li>
</ul>

＆＃13;

Answer 3

也许这个（添加换行和text-align：center）：

.center {
  margin: 0 auto;
  text-align: center;
}

ul {
  display: inline-block;
  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: #791519;
}

<div class="center">
  <ul>
    <li><a class="active" href="index.html">Home</a></li>
    <li><a href="index.html">Tab 1</a></li>
    <li><a href="index.html">Tab 2</a></li>
    <li><a href="index.html">Tab 3</a></li>
    <li><a href="index.html">Tab 4</a></li>
  </ul>
</div>

Answer 4

您可以通过更改ul的位置来实现此目的检查ul

的以下css更改

＆＃13;

ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position:relative;
  left:100px;
}

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: #791519;
}

＆＃13;

<ul>
  <li><a class="active" href="index.html">Home</a></li>
  <li><a href="index.html">Tab 1</a></li>
  <li><a href="index.html">Tab 2</a></li>
  <li><a href="index.html">Tab 3</a></li>
  <li><a href="index.html">Tab 4</a></li>
</ul>

＆＃13;

希望这有帮助

HTML中心导航栏

4 个答案: