HTML & CSS 中心导航栏答案

【问题标题】：HTML & CSS Center navigation barHTML & CSS 中心导航栏
【发布时间】：2016-08-21 08:03:20
【问题描述】：

我遇到的问题是，在我的小型测试网站上，我无法让导航栏居中。 我希望所有按钮居中，而导航栏从网站的右侧移动到左侧。我有没有固定宽度，不想拥有一个。该解决方案应该也适用于智能手机和平板电脑，并且只是提一下：我并不真正关心 IE 支持。我已经在网上搜索了一些，但没有任何我尝试过的工作。

这是我已经得到的代码：

        <header class="navigation">
        <nav>
            <ul>
                <li><a class="active" href="#home">Home</a></li>
                <li><a href="#download">Download</a></li>
                <li><a href="#contact">Contact</a></li>
                <!-- Maybe the navigation bar gets more buttons in the future. -->
            </ul>
        </nav>

        <h1>Test Test Test</h1>
    </header>

这是 CSS 代码：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 5px;
    background-color: #333333;
}

li { float: left; }

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
    border-bottom: none;
}

    li a:hover { background-color: #111111 }

我正在使用 HTML5 和 CSS3。

编辑：似乎我对按钮不够清楚。按钮不应与导航栏本身一样大。所有的按钮都应该在导航栏的中心，所以中间是按钮，左右两边只有黑色的导航栏，如果有足够的空间，当然是没有按钮的。

【问题讨论】：

标签： html css web mobile-website navigationbar

【解决方案1】：

使用 flexbox 就可以做到这一点...

如果导航大于视口，添加flex-flow: row wrap; 将允许菜单在较小的屏幕上换行。

您需要为这些样式添加前缀才能在所有浏览器上运行，仅供参考。

.navigation nav {
  display: flex;
  justify-content: center;
  
  background-color: #333333;
}
ul {
  display: flex;
  flex-flow: row wrap;
  
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 5px;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
  border-bottom: none;
}
li a:hover {
  background-color: #111111
}

<header class="navigation">
  <nav>
    <ul>
      <li><a class="active" href="#home">Home</a>
      </li>
      <li><a href="#download">Download</a>
      </li>
      <li><a href="#contact">Contact</a>
      </li>
      <!-- Maybe the navigation bar gets more buttons in the future. -->
    </ul>
  </nav>

  <h1>Test Test Test</h1>
</header>

【讨论】：

好的，谢谢。似乎是我对按钮不够清楚。按钮不应与导航栏本身一样大。所有的按钮都应该放在导航栏的中心，所以中间是按钮，左右两边只有黑色的导航栏，如果有足够的空间，当然是没有按钮的。
@ShadowDragon 啊，我明白了，我已经为你更新了答案。
@ShadowDragon 我还分离了您需要前缀的样式，您可以使用在线自动前缀器为您生成这些样式。
谢谢。这就是我一直在寻找的。span>

【解决方案2】：

只有两行 css 的解决方案： 1. ul{ 文本对齐：中心；} 2. li{display: inline-block;} 就是这样:)

<html>
<head>
	<style>
		ul {
		    list-style-type: none;
		    margin: 0;
		    padding: 0;
		    overflow: hidden;
		    border-radius: 5px;
		    background-color: #333333;
		    text-align: center;
		}

		li { display: inline-block; }

		li a {
		    display: block;
		    color: white;
		    text-align: center;
		    padding: 16px;
		    text-decoration: none;
		    border-bottom: none;
		}

		    li a:hover { background-color: #111111 }
	</style>
</head>
<body>
	 <header class="navigation">
        <nav>
            <ul>
                <li><a class="active" href="#home">Home</a></li>
                <li><a href="#download">Download</a></li>
                <li><a href="#contact">Contact</a></li>
                <!-- Maybe the navigation bar gets more buttons in the future. -->
            </ul>
        </nav>

        <h1>Test Test Test</h1>
    </header>
</body>
</html>

【讨论】：

【解决方案3】：

我认为最简单的解决方案是将 100% 除以菜单中 li 项目的数量，所以在这种情况下，我们有 3 个 li 元素，大约占宽度的 33%：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 5px;
    background-color: #333333;
}
li {
    float: left;
    width: 33%;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
    border-bottom: none;
}
li a:hover { background-color: #111111 }

<html>
<head>
</head>
<body>
        <header class="navigation">     
        <nav>
            <ul>
                <li><a class="active" href="#home">Home</a></li>
                <li><a href="#download">Download</a></li>
                <li><a href="#contact">Contact</a></li>
                <!-- Maybe the navigation bar gets more buttons in the future. -->
            </ul>
        </nav>

        <h1>Test Test Test</h1>
        </header>
</body>
</html>

【讨论】：