Question

我试图搜索这个答案，因为我知道这已被多次询问，我发现之前的每个建议都不适合我。如何让这个ul导航器居中并且不能正确浮动？谢谢！

    <header>
  <div id="header-content">
    <nav class="header">
      <input class="menu-btn" type="checkbox" id="menu-btn" />
      <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
      <ul class="menu">
        <li><a href="#work">Our Work</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#careers">Careers</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </div>
</header>

nav.header {
    width: 100%; 
    height: auto;
    float: right;
    background-color: Silver;
    text-align: left;
    margin: 0 0 10px 0;
}
.header ul {
    display: inline-block;
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0;
}
.header ul li {
    display: block;
    float: left;
}
.header li a {
    display: block;
    float: left; 
    padding: 1em;
    /*  border-right: 1px solid #f4f4f4;*/
    text-decoration: none;
    color: #000000;
}
.header li a:hover {
    background-color: #B5B5B5;
}

Answer 1

一种解决方案是给菜单ul一个宽度（*我在这里使用最小宽度），将其设置为一个块，并将边距设置为0 auto：

.header ul {
  display: block;
  list-style-type: none;
  text-align: center;
  margin: 0 auto;
  padding: 0;
  min-width: 450px;
}

并设置.header .menu没有浮动：

.header .menu {
  clear: none;
  float: none;
  max-height: none;
}

然而，这不是一个完美的解决方案，因为您需要在较小尺寸屏幕的断点处编写。

标题中的中心ul导航

1 个答案: