对准内里UL在一行

我试图让一些利的工作和无法弄清楚以下几点： 1）例如：对准内里UL在一行

<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会在特定的内部对齐，并且它与它在同一行吗？

Regards， Denis。

来源

2011-08-19 Denis

你已经有一些CSS，你可以在这里展示？ – kinakuta

这是两个不同的问题。考虑将第一个问题提交给一个新问题，因为标题和已经给出的答案解决了第二个问题。 – NGLN

@NGLN我认为已经给出答案不回答第二，而是第一个问题。所以，它应该像http://jsfiddle.net/BWZfr/1/，但子项与第一项同一行。对不起，不清楚。 – Denis

你可能会寻找这样的事情，我不知道：

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/？

来源

2011-08-19 21:04:31

可能要重新发布你的jsfiddle链接 –

@Chris谢谢你的帮助。是的，你的第二个例子看起来像我需要的，但我希望这些子和父李一样在同一行？可能吗？ – Denis

我认为这是你想要的。我无法弄清楚如何在没有额外的div的情况下做到这一点。 http://jsfiddle.net/BWZfr/11/ –

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

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; }

来源

2011-08-19 23:41:58

对不起，不完全。这就是我想要做的，但没有额外的div http://jsfiddle.net/BWZfr/11/ – Denis

对准内里UL在一行

回答

相关问题