在保持列表垂直定位的同時保持列表內嵌文本

現在顯示爲：文本1 2 3 4，列表與文本水平內嵌。有沒有辦法使列表垂直顯示，同時仍然保持與文本內聯？（而不是文本1 2 3 4，2應出現在1,3之下，等等，但列表仍將出現在「文本」的右側並與「文本」位於同一行）在保持列表垂直定位的同時保持列表內嵌文本

任何幫助表示讚賞。謝謝！

HTML

<div id = "text">text</div> 
<ul id="ulist"> 
    <li id="contents">1</li> 
    <li id="contents">2</li> 
    <li id="contents">3</li> 
    <li id="contents">4</li> 
</ul>

CSS

#ulist { 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
} 

#contents { 
    display: inline-block; 
} 

#text { 
    display: inline; 
} 

#text2 { 
    display: inline; 
}

來源

2013-10-18 alexj

喜歡這個..？ http://jsfiddle.net/cknfb/ –

類似。但「文本」仍然在第1行（旁邊1而不是4）。 – alexj

當然，擺脫你的規則，只是浮動的div左邊：

#text { 
    float:left; 
}

注意的ID 必須是獨特。

jsFiddle example

來源

2013-10-18 02:59:20 j08691

現象！擁有獨一無二的ID確實有效！只是想知道......爲什麼列表中的所有內容都必須有唯一的ID？ – alexj

@ user2888188 ID假設設計是唯一的，對重複的事物使用類。 –

啊，是菜鳥的錯誤。但在這種情況下，我甚至不需要任何ID或課程。再次感謝您的幫助！ – alexj

添加display:block;您li元素，修改#text到display:inline-block和vertical-align: top，這應該使它們疊加。

#ulist { 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
} 

#ulist li { 
    display: block; 
} 

#contents { 
    display: inline-block; 
} 

#text { 
    display:inline-block; 
    vertical-align:top; 
} 

#text2 { 
    display: inline; 
}

來源

2013-10-18 03:00:22

我認爲這最終像http://jsfiddle.net/cknfb/其中「文本」不再在第1行。 – alexj

@ user2888188 - 你是對的。對導致其正常工作的答案進行了調整。 –

我能夠使用文本左側的浮點數來實現答案。謝謝你的幫助！ – alexj

在保持列表垂直定位的同時保持列表內嵌文本

回答

相關問題