浮動李李裏面

我在使用代碼編輯器的麻煩所以這裏

<ul> 
    <li>Item1</li> 
    <ul> 
     <li>Item 1.1</li> 
     <li>Item 1.2</li> 
    </ul> 
    <li>Item2</li> 
    <ul> 
     <li>Item 2.1</li> 
     <li>Item 2.2</li> 
    </ul> 
</ul>

而且我想浮動元素來得到這樣一個結果：

是這個標記有可能嗎？

來源

2013-03-28 user1872795

你必須將內部'ul'嵌套到父'li'中 – Ragnarokkr

動態示例：http://jsfiddle.net/KdLMa/ – dfsq

你可以做這樣的事情

CSS

ul li { 
    display: inline; 
    vertical-align: top; 
} 
li > ul { display: inline-block; } 
li > ul li { display: block; }

HTML

<ul> 
    <li>Item1 
     <ul> 
      <li>Item 1.1</li> 
      <li>Item 1.2</li> 
     </ul> 
    </li> 
    <li>Item2 
     <ul> 
      <li>Item 2.1</li> 
      <li>Item 2.2</li> 
     </ul> 
    </li> 
</ul>

的fiddle進行測試。

來源

2013-03-28 19:31:59 Ragnarokkr

需要添加vertical-align：top;爲了讓他們全部對齊正確。 – Michael

已更新。謝謝@邁克爾，我已經忘記了:) – Ragnarokkr

謝謝大家。我發現了一個工作區，但我嘗試了內聯區塊建議。 – user1872795

您的HTML無效，因爲<ul>必須包含在<li> s中。假設你將不能嵌套多個<ul>，這可以通過使所有的<ul>和<li>display: inline-block，除了最內層的<li>小號

http://jsfiddle.net/zeVwg/

來源

2013-03-28 19:32:05

我看過這個鏈接，我不明白爲什麼它不適合我。我會檢查其餘的CSS，以防萬一出現問題。 – user1872795

已解決。由於聲譽而無法回答我的問題。謝謝大家。 – user1872795

首先，您需要調整您的HTML像這樣實現的：

<ul> 
    <li>Item1 
     <ul> 
      <li>Item 1.1</li> 
      <li>Item 1.2</li> 
     </ul> 
    </li> 


    <li>Item1 
     <ul> 
      <li>Item 1.1</li> 
      <li>Item 1.2</li> 
     </ul> 
    </li> 
</ul>

來源

2013-03-28 19:32:11 Michael

我發現了一種改變標記的方法。我在一秒之內發佈它。謝謝你的答案。 – user1872795

HTML：

<ul> 
    <li>Item1 
     <ul> 
      <li>Item 1.1</li> 
      <li>Item 1.2</li> 
     </ul> 
    </li> 
    <li>Item2 
     <ul> 
      <li>Item 2.1</li> 
      <li>Item 2.2</li> 
     </ul> 
    </li> 
</ul>

CSS：

ul li { float:left; position:relative; margin-left:10px; list-style:none; width:120px;} 
ul li:first-child{ margin:0px;} 

ul ul { position:absolute; left:0; top:0; display:none; width:100px; z-index:10;} 

ul li:hover ul{ display:block;} 

ul ul li{ float:none; margin-left:0px; margin-top:5px; width:100px;} 
ul ul li:first-child{ margin-top:0px;}

我已經做了所有的導航它在當我們將鼠標懸停在李其名單將出現。

來源

2013-03-28 23:07:17 Hassaan

浮動李李裏面

回答

相關問題