Question

对于水平菜单，我想在整个宽度上证明列表项。

这有效：

CSS：

ul {height: 1em;text-align: justify;overflow: hidden;padding-left: 0;}
li {display: inline-block;}
li:last-child {padding-left: 100%;}

HTML：

<ul>
    <li>flexible number</li>
    <li>and length of</li>
    <li>list items</li>
    <li>hidden</li>
</ul>

OUTPUT（线条显示UL的宽度）：

|flexible number             and length of              list items|

如果我删除所有空格和换行符以缩小HTML输出，则它不再有效。

小型HTML：

<ul><li>flexible number</li><li>and length of</li><li>list items</li><li>hidden</li></ul>

看起来像这样：

|flexible numberand length oflist items                           |

是否有机会使用纯CSS获得“正常”行为？

请看看这个小提琴： http://jsfiddle.net/Tfranz/HpP99/

Answer 1

查看下面的jsFiddle - 您应该能够使用％widths和float来执行此操作而无需填充或边距。标准缩小不应影响结果。

http://jsfiddle.net/MNally/CWjMz/

HTML：

<div id="container">
    <ul id="the-list">
        <li>item1</li>
        <li>item1</li>
        <li>item1</li>
    </ul>
</div>

CSS：

div#container {
    width:100%;
    padding:0;
    margin:0;
}

ul#the-list {
    width:100%;
    text-align:center;    
}

li {
    float:left;
    display:inline;
    padding:0;
    margin:0;
    background:#c9c;
    width:33.333%;
}

我将margin / padding设置为'0'以说明它们不是必需的。你可以删除这些行。

Answer 2

如何使用display:table;和display:table-cell;？

见这里：http://jsfiddle.net/HpP99/2/

Answer 3

我遇到了同样的问题。众所周知，HTML缩小消除了空格，但是在这种情况下，它破坏了CSS的“ text-align：justify”和“ text-align-last：justify”。

解决方案是实施单行jQuery代码，以在列表项的结束标记后添加空格：

$('#the_list li').after("&#32;");

我希望有人能对此有所帮助。

具有缩小HTML的合理水平列表

3 个答案: