對準內裏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在一行

回答

相關問題