Question

我试图将导航栏<ul>内的<div>置于margin: 0 auto;属性中，但它无效。我找到了几十个解决方案，但没有一个能够工作...... 这个清单必须是垂直的。

HTML：

<header>
  <div class="container">
    <% link_to '', root_path, id: 'logo' %>
    <a id="nav-toggle" href="#"><span></span></a>
    <div id="navigation" class="navbar navbar-inverse navbar-fixed-top">
      <ul class="nav navbar-nav">
        <li><a href="#speciality">Our speciality</a></li>
        <li><a href="#team">Our team</a></li>
        <li><a href="#workflow">How do we do it</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact us</a></li>
      </ul>
    </div>
  </div>
</header>

CSS：

header {
  width: 100%;

  .container {
    width: 100%;

    #navigation {
      //display: none;
      height: auto;
      background: rgba(0, 0, 0, 0.9);
      width: 100%;

      ul {
        text-align: center;
        margin: 0 auto;
        position: relative;

        li {
          clear: both;
          display: inline-block;
          padding: 15px;

          a {
            color: $c-text-white;
            font: $font-family-base;
            font-size: 20px;
            text-transform: uppercase;

            &:hover {
              color: $c-text-orange;
            }
          }
        }
      }
    }
  }
}

更新

解决方案：

Bootstrap navbar-nav课程以某种方式覆盖了我的CSS。因此删除它并使用Paulie_D's answer中的代码修复了问题

Answer 1

ul是块级别，因此默认为100％宽。

如果你inline-block并将text-align:center'应用于父母，你应该得到你想要的。

 #navigation {
        height: auto;
        background: rgba(0, 0, 0, 0.9);
        width: 100%;
        text-align: center;
        ul {
            text-align: center;
            display: inline-block;
            position: relative;

JSfiddle Demo

无法使用bootstrap将<ul>置于导航栏内部

1 个答案: