CSS对齐挑战答案

【问题标题】：CSS align challengeCSS对齐挑战
【发布时间】：2017-11-21 12:20:05
【问题描述】：

我正在使用带有 3 组项目的引导 3.3.7 导航栏：

A) 在左侧（1 项），
B) 居中（4 项），
C) 右侧（1 项）

所以我有：

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav tabs">
            <!-- A) here are the left aligned LIs (float: left) -->
        </ul>

        <ul class="nav navbar-nav navbar-right">
            <!-- C) here are the right aligned LIs (float: right) -->
        </ul>

        <ul class="nav navbar-nav navbar-center tabs">
            <!-- B) here are the right aligned LIs (float: none; text-align: center; font-size:0) -->
        </ul>
    </div>
</nav>

根据 cmets 的要求，这是我的 CSS：

.navbar-nav > li {
    float: left;
    position: relative;
}
.navbar-right {
    float: right!important;
    margin-right: -15px;
}
.navbar-nav.navbar-center {
    float: none;
    text-align: center;
    font-size: 0;
}
.navbar-nav.navbar-center > li {
    vertical-align: top;
    display: inline-block;
    float: none;
    font-size: 1.3rem;
}

这是一个显示它的 JSFiddle：https://jsfiddle.net/m5s8ov8j/（请将 JSFiddle 居中的垂直分隔符拖放到左侧以查看结果，因为 Bootstrap 将 nevbar 变成了汉堡菜单）。

现在我被要求在组 (B) 和 (C) 之间插入一组 2 个项目的新组，其中包含 2 个条件：

组 (B)（居中）必须保持居中，
新组必须位于 (B) 的最后一项和 (C) 的第一项之间。

我该怎么做？

【问题讨论】：

请包含您的 CSS
你能用jsfiddle提供代码吗？
我考虑了你所有的 cmets（css、jsfiddle）并更新了我的问题。

标签： css twitter-bootstrap twitter-bootstrap-3 navbar

【解决方案1】：

如果只需要让xs上可见的区域，可以使用bootstrap responsive classes

Bootply

HTML：

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>

  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav tabs">
      <li>
        <a href="/">MyWebsite</a>
      </li>
    </ul>

    <ul class="nav navbar-nav navbar-right">
      <li>
        <a href="">Menu</a>
      </li>
    </ul>

    <ul class="nav navbar-nav navbar-right visible-xs">  // <-- HERE
      <li>
        <a href="">New Group Item 1</a>
      </li>
      <li>
        <a href="">New Group Item 2</a>
      </li>
    </ul>

    <ul class="nav navbar-nav navbar-center">
      <li>
        <a href="">Company</a>
      </li>
      <li>
        <a href="">Products</a>
      </li>
      <li>
        <a href="">Contact</a>
      </li>
    </ul>
  </div>
</nav>

【讨论】：

所有项目必须具有相同的可见性。谢谢你的小费。

【解决方案2】：

我认为单独使用 CSS 无法完成，但这里有一个使用 JavaScript 的解决方案。绝对定位新的 UL，然后确定它的位置。
我把它放在 onresize 事件中，这样当用户使窗口变宽或变窄时，位置将保持正确。

window.onresize = function() {

var cenUL = document.querySelector('.navbar-default .navbar-collapse ul.navbar-center li:last-child');
var rightUL = document.querySelector('.navbar-default .navbar-collapse ul.navbar-right li:first-child');
var newUL = document.getElementById('new');
newUL.style.left = ((cenUL.offsetLeft+cenUL.offsetWidth+rightUL.offsetLeft-newUL.offsetWidth)/2)+'px';
};

window.onresize();

.navbar-nav.navbar-center {
  float: none;
  text-align: center;
  font-size: 0;
}

.navbar-nav.navbar-center > li {
  vertical-align: top;
  display: inline-block;
  float: none;
  font-size: 1.3rem;
}
#new {
  position:absolute;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>

  <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav tabs">
      <li>
        <a href="/">MyWebsite</a>
      </li>
    </ul>

    <ul class="nav navbar-nav navbar-right">
      <li>
        <a href="">Menu</a>
      </li>
    </ul>
    
    <ul id="new" class="nav navbar-nav">
      <li><a href="">NEW!</a></li>
    </ul>

    <ul class="nav navbar-nav navbar-center">
      <li>
        <a href="">Company</a>
      </li>
      <li>
        <a href="">Products</a>
      </li>
      <li>
        <a href="">Contact</a>
      </li>
    </ul>
    
  </div>
</nav>

【讨论】：