在浮动的右父级内浮动左行中的所有元素答案

【问题标题】：Floating left all elements in a row inside floated right parent在浮动的右父级内浮动左行中的所有元素
【发布时间】：2015-01-09 06:35:09
【问题描述】：

这是我的问题：http://jsfiddle.net/4f4Laskz/2/

我只想将所有列表项设置为一行。但是最后一个元素不会停留在右侧，而是位于行的下方。为什么会这样？

HTML：

<a href="#index" class="logo">
    <h1><span class="medikal">Some text</span></h1>
    <span class="saglik">Some text</span>
</a>
<nav>
    <ul>
        <li class="selected"><a href="#hakkimizda">Some text</a></li>
        <li><a href="#urunler">Some text</a></li>
        <li><a href="#markalar">Some text</a></li>                                  
        <li><a href="#iletisim">Some text</a></li>
    </ul>
</nav>

CSS：

.logo {
    margin: 0.5em 0;
    float: left;
    line-height: 0.2em;
}

nav {
    margin: 0.7em 0;
    float: right;
    font-size: 16px;
}

nav li {
    margin: 0 10px;
    float: left;
    padding: 1%;
    border-radius: 5px;     
}

【问题讨论】：

解决这个问题的一种方法是固定nav的宽度。
@xyres，我们不知道有多少元素会添加到导航中。总元素宽度的总和可以高于固定导航的宽度。我们不想要它。看看上面 Christian Varga 的解决方案，效果很好。

标签： css css-float floating

【解决方案1】：

没有宽度的浮动元素是高度不可预测的，应尽可能避免。

浮动元素通常与其子元素一样宽。对浮动元素内的子元素使用百分比会使渲染器感到困惑。

想一想：子元素的百分比填充要求渲染器知道父元素的宽度。但是浮动父项的宽度基于其所有子项的总宽度（包括它们的填充）。所以这种类型的计算是先有鸡还是先有蛋的复杂场景，看起来渲染器只是放弃了，而是做了一些奇怪的事情。

尝试使用非百分比值：

nav li {
    margin: 0 10px;
    float: left;
    padding: 6px;
    border-radius: 5px;     
}

【讨论】：

很棒的解释。不知道 “无边距” 的事情。
它有效，谢谢！而且我没有为它们设置宽度，因为可能会出现更高的字母计数问题。
不用担心。既然我已经做了更多的测试，我认为我对宽度问题的看法是错误的。删除边距肯定会修复它，但导航实际上足够宽以处理 4 个元素。所以我不知道它为什么会消失。
对不起，我完全错了。但我已经确定了真正的问题并更新了我的帖子以反映更新后的发现。
是的，这比其他的更有意义。百分比填充使父宽度更高，并且子填充也因为父而变得更高，并且父宽度变得更高......这就像一个无限循环。再次感谢！