如何根据导航栏中的左右元素对齐 li 元素

Question

我想在两个浮动元素之间对齐一个元素<li>

我有以下内容：

ul > li {
    display: inline-block;
    display:inline;
}

ul{
  text-align: center
}

#left{
  float: left
}

#right{
  float: right
}

#mid{
    margin-left: auto;
    margin-right: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default" role="navigation">
  <ul id="list_navbar" class="nav navbar-nav">
    <li id="left">LEFT</li>
    <li id="right">RIGHT</li>
    <li id="mid">MID</li>
  </ul>
</nav>

中间元素没有在大屏幕中居中，但是当我从 <ul> 元素中删除 class nav navbar-nav 时：

ul > li {
    display: inline-block;
    display:inline;
}

ul{
  text-align: center
}

#left{
  float: left
}

#right{
  float: right
}

#mid{
    margin-left: auto;
    margin-right: auto;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default" role="navigation">
  <ul id="list_navbar">
    <li id="left">LEFT</li>
    <li id="right">RIGHT</li>
    <li id="mid">MID</li>
  </ul>
</nav>

如何在不删除 class 的情况下对齐？

Answer 1

你能试试这个吗？这里有一些 bootstrap 代码减去了 margin.. 现在我们已经覆盖了代码 .navbar-nav

css

ul > li {
    display: inline-block;
    display:inline;
}

ul{
  text-align: center
}

#left{
  float: left
}

#right{
  float: right
}

#mid{
    margin-left: auto;
    margin-right: auto;
}
.navbar-nav{
  width:100%;
  margin: 7.5px 0px !important;
}

Answer 2

您可以考虑使用 flexbox 而不是浮动。它带有这种开箱即用的设置。

所以直接的答案可能是这样的：

ul{
  display: flex;
  justify-content: space-between;
}

justify-content: space-between; rule 会做你想做的，并在你的 li 之间设置尽可能多的 space 。它会按照你的 li 的顺序执行此操作，因此你需要编辑你的代码并将中间一个设置在你的 li 结构的中间。

更新了代码段

ul {
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<nav class="navbar navbar-default" role="navigation">
  <ul id="list_navbar">
    <li>LEFT</li>
    <li>MID</li>
    <li>RIGHT</li>
  </ul>
</nav>

注意到默认的 UL 元素有一个填充，我已在此代码段中删除了该填充。我还删除了您用于 li 的所有其他 ID，因为它们不需要按预期工作。

希望对您有所帮助。

如何根据导航栏中的左右元素对齐 li 元素

How to align li element depending on left and right element in navbar

html

css

twitter-bootstrap-3