Question

jsfiddle http://jsfiddle.net/Sapphireblue/781rrymp/39/＆amp;底部的代码

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

我想要做的是将最左边的LI的左边缘保持在其所有父母的左边缘;在所有父母的右边缘，最右边的李的右边缘;并使另外两个LI在外部两个之间均匀分布。有点像完全合理的文本行。

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

我为我的LI玩过不同的单位，没有一个是正确的。当你调整浏览器窗口大小并且父div缩小时，我尝试了对LI上字体大小进行小调整的媒体查询，这有所帮助，但除非我每隔5个像素设置一个断点，否则这不适用于解决方案。如果我计算出与我想要的相近的边距，然后在最后一个子LI上设置float：右边，如果你将窗口调整到最后一个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>

如何在<li> s之间获得相等的间距：float：left;在响应宽度div </li>

2 个答案: