HTML中心导航栏

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标签上设置文本对齐以居中。

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>

例

Answer 2

我建议使用Flex Box ：

 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; } 

 <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> 

Answer 3

也许这（添加环绕和文本对齐：居中）：

 .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更改

 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; } 

 <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> 

希望这可以帮助