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>  </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 。
编辑：似乎我对按钮不够清楚。按钮不应该与导航栏本身一样大。所有按钮都应该位于导航栏的中心位置，所以中间有按钮，左侧和右侧只有黑色导航栏，如果剩下足够的空间，则没有按钮。

Answer 1

使用flexbox就可以做到......

如果导航比视口大，

添加flex-flow: row wrap;将允许菜单在较小的屏幕上换行。

您需要在所有浏览器FYI上运行这些样式的前缀。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

解决方案只有两行css： 1. ul {text-align：center;} 2. li {display：inline-block;} 这就是全部:)）

allWordList
    .stream()
    .sorted(Comparator.comparing(a -> a[0], String.CASE_INSENSITIVE_ORDER))
    .collect(Collectors.toList());

Answer 3

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

＆＃13;

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 }

＆＃13;

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

＆＃13;

HTML＆amp; CSS中心导航栏

3 个答案: