如何強制一個列表使用HTML css垂直

Question

我有一個列表我想添加到<div>。每個listitem包含一個<div>，其中又包含一個圖像和一個文本字符串。該列表必須是垂直的。我試過<ul>與width:100%display:block，但列表是從左到右水平流動。我如何使列表垂直？

Answer 1

嘗試把display: block在<li>標記而不是<ul>

Answer 2

我想補充一點給李的CSS

.list-item 
{ 
    float: left; 
    clear: left; 
} 

Answer 3

希望這是你的結構：

<ul> 
    <li> 
     <div ><img.. /><p>text</p></div> 
    </li> 
    <li> 
     <div ><img.. /><p>text</p></div> 
    </li> 
    <li> 
     <div ><img.. /><p>text</p></div> 
    </li> 
    </ul> 

默認情況下，它會陸續添加一行：

----- 
----- 
----- 

，如果你想讓它垂直，只需添加浮動留給李，給寬度和高度，確保內容不會打破寬度：

| | | 
| | | 

li 
{ 
    display:block; 
    float:left; 
    width:300px; // adjust 
    heigh:150px; // adjust 
    padding: 5px; //adjust 
} 

Answer 4

CSS

li { 
    display: inline-block; 
} 

廠對我也是。