Question

更新：简化的HTML＆amp; CSS根据下面的答案之一。然而问题仍然存在。

我有一个类似的工作导航：

                item11item2item3    Centered    item4item5item6

我想在项目之间添加填充，所以它看起来像这样：

       item1     item2     item3    Centered    item4     item5     item6

左侧上的项目是右对齐。右侧上的项目是左对齐。

问题

如果我使用float: right;来证明列表的合理性，我会得到item3 item2 item1。
如果我使用float: left;并将容器宽度设置为auto，我可以获得正确的布局，但仅限于使用px填充。

当我使用像%这样的padding-left: 3%;填充时，它会断开并看起来像这样：

          item1     item2       Centered    item4     item5     item6
          item3

这是我的 HTML ：

<div class="container">
    <nav>
        <ul class="left">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
        <ul class="center">
            <li>Centered</li>
        </ul>
        <ul class="right">
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
        </ul>   
    </nav>
</div>

这是我的 CSS ：

/* Reset */

html, body, nav, li {
  margin: 0; padding: 0; border: 0;
}

li {
  list-style-type: none;
  list-style-position: outside;
}

/* Styles */

.container {
  width: 100%;
  height: auto;
}

nav {
    width: 80%;
    margin: 0 auto;
}

nav > ul.left {
    position: absolute;
    right: 55%;
}

nav > ul.left > li {
    float: left;
    padding-right: 5%;
}

.center {
    position: absolute;
    left: 45%;
    width: 10%;
}

.center li {
    text-align: center;
}

nav > ul.right {
    position: absolute;
    left: 55%;
    width: 45%;
}

nav > ul.right > li {
    float: left;
    padding-left: 5%;
}

备注：

我正在使用绝对定位＆amp;容器，以便保持“居中”完全居中，即使左右导航项的宽度不相同。
我使用的是基于％的宽度，因为它是灵活的布局（reponsive）
上面的代码工作正常，但我真的想基于填充百分比，所以它很灵活。

所以它出现 li-container div正确地继承了宽度并在我使用像素时占用了填充，但是当我使用百分比时却没有。这是典型的行为吗？解决方案是什么？

Here's a jsFiddle以防你想玩它。

其他更新：

主要问题似乎是需要让“左”项正确对齐。如果我使用float:right那么我会得到相反的顺序，这是不好的。如果我在左侧项目上使用float:left，那么顺序是正确的，但我需要从容器中删除显式宽度，或者项目不是右对齐的。删除显式容器宽度会导致我遇到的问题。

Answer 1

编辑：这是一个新的解决方案。希望这看起来像预期的。 ;）

<强> HTML

<nav>
    <ul class="left">
        <li>Item 1 longer longer</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <ul class="centered">
        <li>Centered</li>
    </ul>
    <ul class="right">
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>
</nav>

<强> CSS

ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

nav {
    position: relative;
    min-width: 700px;
}

nav > ul {
    width: 100%;
    background: red;
}

nav > ul > li {
    display: inline-block;
    text-align: center;
    background: green;
    color: white;
}

nav > ul.centered {
    position: absolute;
    left: 40%;
    width: 20%;
    background: orange;
}

nav > ul.centered > li {
    display: block;
    background: orange;
}

nav > ul.left {
    position: absolute;
    left: 0;
    max-width: 40%;
}

nav > ul.left > li {
    float: right;
    padding: 2%;
}

nav > ul.right {
    position: absolute;
    left: 60%;
    max-width: 40%;
}

nav > ul.right > li {
    float: left;
    padding: 2%;
}

<强>演示

Try before buy

<强>更新

使用display: inline-block以正确的顺序排列所有内容的唯一方法是使用min-width。我只更新了左侧来演示它。

最后的想法：由于这永远不会中断，您必须为<nav> - 元素设置nav > ul.left { position: absolute; left: 0; max-width: 40%; text-align: right; white-space: nowrap; line-height: 0; font-size: 0; } nav > ul.left > li { display: inline-block; padding: 10%; line-height: auto; font-size: 12px; }，否则元素将在太小的屏幕上重叠。您之前遇到的情况是，当浮动元素的父容器的宽度变得太小并且它们进入下一行时，是浮动元素的预期行为。

更新了CSS

{{1}}

<强>演示

Try display: inline-block

这里还有我first solution的链接。

Answer 2

使用Chrome中的元素检查器， .left .li上3％的填充，我收集了这个：

.left .li-container的计算宽度： 128px

每个li个人的宽度： 43px

你有三个li - ＆gt; 3 * 43 = 129px

这将导致子li的宽度扩展父容器的宽度，从而换行到新行。所以它可能与从该百分比值计算实际宽度的四舍五入有关。

为了弥补这一点，我现在只能想到一个jQuery / JS解决方案，但我怀疑你是否想要它，并且只想在纯CSS中使用它。

注意：我只是将其添加为评论，但不幸的是我不能，因为这需要50个代表。很抱歉没有提供完整的答案！

具有灵活的左右宽度的居中导航 - 百分比填充不起作用

2 个答案: