HTML & CSS 中心导航栏

Question

我遇到了一个问题，在我的小型测试网站上我无法让导航栏居中。 我想让 上面的所有按钮居中，同时导航栏从网站的右侧移到左侧 。我有没有固定宽度而且不想有。该解决方案应该也适用于智能手机和平板电脑，顺便提一下：我不太关心 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。

编辑：看来我对按钮不够清楚。按钮不应与导航栏本身一样大。所有的按钮都应该以导航栏为中心，所以中间有按钮，而在左边和右边只有没有按钮的黑色导航栏，当然如果还有足够的 space [=14] =]

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

Answer 2

我认为最简单的解决方案是将 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>

Answer 3

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

HTML & CSS 中心导航栏

HTML & CSS Center navigation bar

html

css

web

mobile-website

navigationbar