Question

我正在努力做一些李的工作而无法弄清楚以下内容： 1）例如：

<ul>
<li> very long element</li>
<li> short </li>
</ul>

是否可以使用CSS使第二个li元素的宽度等于其中的文本？显然它的宽度将等于第一个元素的宽度

2）我可以按照以下方式安排我的li和ul（我没有格式化地编写它以便它显示我想要的方式）：

| UL |

| li | top1 | ul | |李| SUB1 | /李| |李| SUB2 | /李| | / UL |

| li | top2 | ul | |李| SUB3 | /李| |李| SUB 4 | /李| | / UL |

| / UL |

换句话说，CSS是否会在特定的li ul内对齐，而且它与li在同一行中？

此致丹尼斯。

Answer 1

你可能正在寻找这样的东西，我不确定：

<强> HTML

<ul>
    <li>item one</li>
    <li>item two two two two two</li>
    <li>item three three</li>
</ul>

<强> CSS

ul li { float: left; clear: left; margin-bottom: 10px; background: #ccc }

看起来像

http://jsfiddle.net/BWZfr/

对于你的第二个问题......也许你的意思是http://jsfiddle.net/BWZfr/1/？

Answer 2

我认为这将回答这两个问题。这是我能实现这一目标的最简单方法。列表将保留在一行中，而标记仍然在语义上正确。我添加了填充，以保持项目均匀分布。

HTML

<ul>
    <li>List 1:1</li>
    <li>List 1:2</li>
    <li>List 1:3</li>
    <li>
        <ul>
            <li>List 2:1</li>
            <li>List 2:2</li>
            <li>List 2:3</li>
        </ul>
    </li>
    <li>List 3:1</li>
    <li>List 3:2</li>
    <li>List 3:3</li>
</ul>

CSS

ul { list-style-type:none; margin:0; padding:0; }
li { display:inline; float:left; padding:0 10px; margin:0; }

在一行中对齐li里面的li

2 个答案: