Twitter bootstrap 3 带两个列表的引导导航栏中心

如何使引导导航栏ul居中，而忽略另一个ul占用的空间，从而使中心真正居中，而不移动

我的引导导航栏中有两个无序列表。我希望其中一个（#子句）居中，另一个（#社交图标）位于右侧

但是居中的那个稍微在绝对中心的左边，因为右边的那个占据了一些空间

因此，根据剩余空间而不是整个宽度计算居中

以下是我目前的代码： 目前，我在另一个列表中有一个右对齐的列表。它们应该是两个单独的列表。但是当我把它们分开时，我遇到了这样一个问题：每个人都想要自己的一行

我使用的是bootstrap3

css

#navbar {
  #clause {
    text-align: center;

    li {
      font-size: 1.6em;
      float: none;
      display: inline-block;
      *display: inline;
      *zoom:1;
      vertical-align: top;
    }
  }

  #social-icons {

  }

}

导航栏HTML

<nav class="navbar navbar-default navbar-fixed-top" id="navbar">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12">
        <ul class="nav nav-tabs" id="clause">
          <li></li>
          <li></li>
          <li></li>
          <ul class="nav navbar-right" id="social-icons">
            <li></li>
            <li></li>
          </ul>
        </ul>
      </div>
    </div>
  </div>
</nav>

如果你想忽略列表所占据的空间，社交图标将其位置设置为绝对位置。 这样做将为#子句提供整个宽度

CSS

---

这无论如何都不是代码，除非代码的定义已经改变。请包括适当的代码，以便我们可以测试，帮助我们帮助you@Fabio它的Jade（用于HTML）和SASS或更少（用于CSS）在CodePen上工作得很好。那么你应该添加你的CodePen，因为它不适合我。不管怎样，我只是想帮你，但你做你想做的事want@Fabio这不是我的问题。。。简单地指出它是有效的代码。虽然指定所使用的语言和框架会对提问者有所帮助…@Fabio转换为html。我认为布局的总体思路已经足够了，在slim的预处理器DSL中更清晰地表示了这一点。

  #social-icons {
    position: absolute;
    right:0;
    top:0;
  }