將UL放在SPAN的右側

我需要在SPAN右側有一個UL（http://jsfiddle.net/Shg9L/8/）。將UL放在SPAN的右側

當寬度不夠，我想了UL保持正對SPAN但李項的右側開始堆積...

的問題是，當我調整下車窗UL根據SPAN進行。

HTML

<div> 
    <span>Categories</span> 
    <ul> 
    <li><a href="#">Book</a></li> 
    <li><a href="#">Computer</a></li> 
    <li><a href="#">Tablet</a></li> 
    <li><a href="#">Toy</a></li> 
    <li><a href="#">Music</a></li> 
    <li><a href="#">Audio</a></li> 
    <li><a href="#">Game</a></li> 
    </ul> 
</div>

CSS

div {.clear;} 

div span { 
    background-color: #E0E0E0;  
    float: left; 
    margin-right: 8px; 
    margin-bottom: 8px; 
    padding: 8px; 
} 

div ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    float: left; 
    .clear;  
} 

div ul li { 
    background-color: #F0F0F0;  
    float: left; 
    margin-right: 8px; 
    margin-bottom: 8px; 
    padding: 8px; 
} 

.clear:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

有誰知道如何解決這個問題？

謝謝你，米格爾

來源

2014-02-13 Miguel Moura

Fiddle

刪除float:left;在div ul

來源

2014-02-13 12:14:27 Karuppiah

這工作過，但他能寫出「類別」一里內也和款式也 –

這不是我想要的......我不想要的物品是在「類別」 span ...在這種情況下，它發生......基本上我想要兩列而不使用表...任何想法？ –

@MDMoura：只是兩列沒有使用表的示例... http://jsfiddle.net/Shg9L/34/ – Karuppiah

您可以使用div {white-space:nowrap;}，以確保它不會在div的內容突破。 ul有display:inline-block;而不是float: left;。 Float left使其向左移動，留下文本流，而inline-block仍將其保留在文本流中，而不佔用新行。

demo

來源

2014-02-13 12:18:04 MarijnS95

事實上，您的示例不能很好地工作......有些詞隱藏在調整窗口大小..任何想法爲什麼？ –

也許嘗試刪除白色空間nowrap屬性 – MarijnS95

閱讀您的評論下面，你想項目打破，但下一行不是在「類別」，但在書下開始。嘗試將它們包裝在一個div中。當我回到電腦時，我會舉一個例子 – MarijnS95

將UL放在SPAN的右側

回答

相關問題