Question

我想用float和clearfix方法布局一系列菜单。一切都很好，除了我希望菜单组在右边。此外，由于菜单文本的长度不同，我不想为它们设置统一的宽度。但是当我为它们设置填充时，最后一个元素将始终进入一个新行。似乎浮动容器的计算并不像希望的那样。

如果我在容器上施加一些大的宽度，则没有额外的线条，但右边会有不受控制的空白。如果我没有设置容器的浮动，让孩子们向右浮动，一切都如预期的那样，除了我必须按相反的顺序写<li>。

HTML是：

<ul class="clearfix" id="top-navigation-container">
                <li class="top-navigation">12345678</li>
                <li class="top-navigation">2345</li>
                <li class="top-navigation">3</li>
                <li class="top-navigation">LOG IN</li>
            </ul>

SCSS是：

#top-navigation-container {
    float: right; // Peculiar thing happens.
    white-space: nowrap;
//    width: 75%;
    text-align: center;
    top: 25px;
    right: 25px;

    .top-navigation {
//      width: 25%;
      padding-left: 2%;
      padding-right: 2%;

      float: left;
      display: inline-block;

    }
  }

.clearfix::after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

背后的原理是什么？为什么有新线？此外，如果我在Chrome的开发工具中检查并取消选中容器的浮动或空白区域，这是非常奇怪的，渲染的结果会有所不同，有时没有换行，有时甚至是右边的额外空格。

还有更令人满意的解决方案吗？

Answer 1

当为<li>元素应用内联块时，会出现此问题。最简单的解决方案是将＃top-navigation-container的font-size设置为零font-size:0，并为<li>元素设置所需的字体大小

示例CSS

#top-navigation-container {font-size:0;}
#top-navigation-container .top-navigation {font-size:20px;}

工作jsfiddle link

Answer 2

尝试将</li>和<li>放在一起......

<li class="top-navigation">12345678</li><li class="top-navigation">2345</li>

之所以会发生这种情况，是因为您在inline-block上使用了<li>，这将提供额外的空间。请查看此article以获取进一步说明。

用浮动定位奇怪的新线

2 个答案: