浮动左浮动右侧父级中的所有元素

Question

这是我的问题：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;     
}

Answer 1

没有宽度的浮动元素是高度不可预测的，如果可能的话应该避免使用。

浮动元素通常与其子元素一样宽。使用浮动元素内的子项的百分比会使渲染器混乱。

考虑一下：子项上的百分比填充要求渲染器知道父项的宽度。但浮动父级的宽度基于其所有子级的总宽度（包括其填充）。因此，这种类型的计算是复杂的鸡蛋或鸡蛋情景，并且看起来渲染器只是放弃并做了一些奇怪的事情。

请尝试使用非百分比值：

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