1

更新：根据以下答案之一简化 HTML 和 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%;
}

笔记：

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

因此，当我使用像素时，似乎li-containerdiv 正确地继承了宽度并考虑了填充，但当我使用百分比时却没有。这是典型的行为吗？解决办法是什么？

这是一个 jsFiddle，以防您想玩弄它。

附加更新：

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

4

2 回答 2

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

演示

先试后买

更新

将所有东西排列整齐、以正确的顺序排列而不会出现任何中断的唯一方法是使用display: inline-block. 我只更新了左侧来演示它。

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

更新的 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;
}

演示

尝试display: inline-block

这也是我的第一个解决方案的链接。

于 2013-08-27T15:19:40.037 回答
1

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

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

每个人li的宽度：43px

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

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

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

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

于 2013-08-27T15:23:45.467 回答