html - 带有缩小 HTML 的对齐水平列表

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>

输出(线条显示 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 恢复“正常”行为？

请看一下这个 fiddle : http://jsfiddle.net/Tfranz/HpP99/

Answer 1

查看下面的 jsFiddle - 您应该能够使用 % 宽度和 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%;
}

我将边距/填充设置为“0”以说明不需要它们。您可以删除这些行。