li元素中的兩行/換行符

Question

我有一個<ul>加上一對<li>。在我的css li { display: inline; }我把li元素放在一個水平的順序。 li元素包含picutre和文本。但是現在，圖片和文字也是橫向排列的，但是我希望它們彼此相互交織。我怎樣才能做到這一點？

<ul> 
     <li> 

       <img src="img/a.png" /> 
       A 

     </li> 
     <li> 

       <img src="img/b.png" /> 
       B 

     </li> 
     <li> 

       <img src="img/c.png"/> 
       C 

     </li> 
    </ul> 

Answer 1

你需要改變你的CSS如下：

li { 
    display: inline-block; 
} 

li img { 
    display: block; 
} 

這裏是一個快速演示：http://codepen.io/anon/pen/VLLoEZ

Answer 2

這不是一個錯誤，但一個正常的行爲。 <img>標籤默認爲內聯。您可以通過將圖像或者更好的文本包裝到塊元素中來解決這個非問題。例如，<p>標記爲您的文本：

<ul> 
    <li> 
     <img src="http://placehold.it/140x100" /> 
     <p>Your text here</p> 
    </li> 
    <li> 
     <img src="http://placehold.it/140x100" /> 
     <p>Your text here</p> 
    </li> 
    <li> 
     <img src="http://placehold.it/140x100" /> 
     <p>Your text here</p> 
    </li> 
</ul> 

jsFiddle

注意我在li元素使用display:inline-block，同時服用inline的優勢（把東西並排側，對齊，...）和block（固定大小，頂部/底部邊距）屬性。雖然它具有a strange but easilly fixed「功能/問題」，但大多數情況下這是將元素並排放置的最佳方式。 display: inline或浮動元素也可以使用，但有一些其他問題，有時需要修復一些技巧。