如何在使用 float:left 设置样式的 <li> 之间获得相等的间距；在响应宽度 div

Question

jsfiddle 在 http://jsfiddle.net/Sapphireblue/781rrymp/39/ & 代码在底部

我有四个导航元素，LI 中的每个文本并排通过 float:left，在 UL 中，在 DIV 中，在 NAV 中，在 DIV 中其宽度是其父元素的百分比。（我使用的是响应式网格布局，这些 LI 由 WordPress 菜单填充，因此很可能有更有效的方法以更少的开销实现此目的，但效率不是该项目规范的一部分。）

我要做的是让最左边的LI的左边缘保持在它所有父类的左边缘；最右边的 LI 的右边缘位于其所有父代的右边缘；并让另外两个 LI 均匀分布在最外面的两个之间。有点像完全合理的文本行。

事实证明，这很难。在百分比宽度 div 之间，这意味着我为 LI 指定的任何边距在您调整大小时都不合适，而且 LI 中的文本项具有不同的宽度，等等，我无法以任何调整大小的方式保持最后一次 LI 刷新（甚至不将 LI last-child margin-right 设置为 0}。

我为我的 LI 使用过各种单元，但没有一个是正确的。当您调整浏览器 window 并且父级 div 缩小时，我尝试了媒体查询以对 LI 上的字体大小进行小幅调整，这有帮助，但除非我每 5 个像素设置一个断点，否则这不是可行的解决方案。如果我计算出接近我想要的边距，然后只在最后一个子 LI 上设置 float:right，如果将 window 的大小调整到最后一个 LI 出现的位置，它看起来很愚蠢它自己的行。

一定有办法做到这一点。如果有人问了这个问题，我很抱歉；我确实浏览了，但没有找到完全匹配的内容。

（注意：我不担心宽度太小以至于 LI 会缠绕在 2 行上，我只是不希望 UL 右侧在 UL 所在的任何宽度处有空白间隙可以包含在一行中。)

#myDiv {
    width:50%;
    margin:0;
    border:1px solid red;
    overflow:auto;
}
#myDiv ul {
    padding:0;
    margin:0 0 0 0;
    height:auto;
}
#myDiv li {
    list-style-type: none;
    float:left;
    background-color:yellow;
    margin-right:20px; /* this value is only good for one
                          specific viewport width: ugggh */
}
#myDiv li:last-child {
    margin-right:0px;
}



<div id="myDiv">
    <nav>
        <div>
            <ul>
                <li><a href="foo">Item 1</a></li>
                <li><a href="foo">Item Two</a></li>
                <li><a href="foo">#3</a></li>
                <li><a href="foo">Longer Item Four</a></li>
            </ul>
        </div>
    </nav>
</div>

Answer 1

如果我没理解错的话，这听起来很难实现而且不可靠，尤其是考虑到可以通过 CMS 编辑导航文本。

在这种情况下，我倾向于以不同的方式处理它，在列表项上使用 display: inline-block。

#myDiv li {
    list-style-type: none;
    display: inline-block;
    background-color:yellow;
    margin: 0 2px;
}

http://jsfiddle.net/781rrymp/40/

Answer 2

使用 TABLE 代替 UL 怎么样？代码将是：

<style type="text/css">
#myDiv {
    width:50%;
    margin:0;
    border:1px solid red;
    overflow:auto;
}
#myDiv table {
    padding:0;
    margin:0 0 0 0;
    height:auto;
    width: 100%;

}
#myDiv td {
    width: 25%;
    background-color: yellow;
    border-right: 20px solid white;
}
#myDiv td:last-child {
    border-right: 0px;
}
</style>

<div id="myDiv">
    <nav>
        <table>
            <tr>
                <td><a href="foo">Item 1</a></td>
                <td><a href="foo">Item Two</a></td>
                <td><a href="foo">#3</a></td>
                <td><a href="foo">Longer Item Four</a></td>
            </tr>
        </table>
    </nav>
</div>

如何在使用 float:left 设置样式的 <li> 之间获得相等的间距；在响应宽度 div

How to get equal spacing between <li>s styled with float:left; in a responsive-width div

css

responsive-design