浮动定位中的奇怪新行

Question

我想用float 和clearfix 方法布局一系列菜单。一切正常，除了我希望菜单组在右边。另外，由于菜单文本的长度不同，我不想为它们设置统一的宽度。但是当我为它们设置一个padding时，最后一个元素总是会换行。好像浮动容器的计算不是如愿

如果我在容器上强加一些宽度，没有额外的行，但右边会有不受控制的空白。如果我不设置容器的浮动，让 children 向右浮动，一切都符合预期，除了我必须以相反的顺序写 <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 的开发工具中选中和取消选中容器的浮动或 white-space，呈现的结果会有所不同，有时没有新行，有时甚至右边有多余的空格。

有没有更满意的解决方案？

Answer 1

当对 <li> 元素应用内联块时会出现此问题。最简单的解决方案是将#top-navigation-container 的字体大小设置为零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>

发生这种情况是因为您在 <li> 上使用了 inline-block，这将提供额外的 space。查看此 article 以获得进一步的解释..

浮动定位中的奇怪新行

Weird new line in positioning with float

html

css

css-float