在浮动的右父元素中向左浮动所有元素

Question

我只想将所有列表项都放在一行中。但是最后一个元素并没有留在右边而是在行的下方。为什么会这样？

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;     
}

在浮动的右父元素中向左浮动所有元素

Floating left all elements in a row inside floated right parent

css

floating

css-float