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

Question

更新：根据以下答案之一简化了 HTML 和 CSS。但是问题仍然存在。

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

                item11item2item3    Centered    item4item5item6

我想在项目之间添加填充，使其看起来像这样：

       item1     item2     item3    Centered    item4     item5     item6

left 上的项目右对齐。 右边的项目是left-justified。

问题

• 如果我使用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%;
}

注意事项：

• 我使用绝对定位和容器来保持“居中”完全居中，即使左右导航项的宽度不相同。
• 我使用基于 % 的宽度，因为它是一种灵活的布局（响应式）
• 上面的代码工作正常，但我真的很想基于填充百分比，所以它很灵活。

所以它似乎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 以正确的顺序排列所有内容而不会出现任何中断的唯一方法。我只更新了左侧来演示它。

最后的想法：因为这永远不会中断，你必须为<nav>-元素设置一个min-width，否则元素会在太小的屏幕上重叠。你之前的经历，当浮动元素的父容器的宽度变得太小并且它们进入下一行时，是浮动元素的预期行为。

更新的 CSS

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

演示

Try display: inline-block

---

这也是我的first solution 的链接。

Answer 2

在那个小提琴上使用 Chrome 中的元素检查器，with 填充在.left .li 上的 3% 我收集到这个：

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

每个li的宽度：43px

你有三个li's --> 3 * 43 = 129px

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

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

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