如何使圖像和按鈕內聯列表？

IM捆綁與對方做這兩個項目內聯，每個列表項具有圖像和按鈕，此按鈕應該是每個圖像下方：即如何使圖像和按鈕內聯列表？

<div id="cocktails"> 
    <ul> 
     <li> 
      <img src ="http://bokertov.typepad.com/.a/6a00d83451bc4a69e2014e8a8f894b970d-800wi" width="100px" height="100px"> 
      <button>Select</button> 
     </li> 
     <li> 
      <img src ="http://bokertov.typepad.com/.a/6a00d83451bc4a69e2014e8a8f894b970d-800wi" width="100px" height="100px"> 
      <button>Select</button> 
     </li> 
    </ul> 
</div>

的CSS：

#cocktails ul{margin:0;padding:0} 
    #cocktails ul li{list-style-type:none;display:inline;padding:0} 
    #cocktails ul li img{width:150px;height:150px;display:block;float:left;padding:0 10px} 
    #cocktails ul li button{display:block;float:left}

但按鈕沒有被定位爲預期的jsfiddle是在這裏： http://jsfiddle.net/8KWGJ/

來源

2012-08-03 user1551482

你應該告訴我們你所期望的。你期望[this]（http://jsfiddle.net/8KWGJ/1/）？或者[這個]（http://jsfiddle.net/8KWGJ/2/）？我的水晶球目前不工作:(添加截圖或描述你想要的結果是什麼，這將有所幫助。 – Zeta 2012-08-03 14:22:44

李標籤的封裝按鈕：如圖所示

<div id="cocktails"> 
<ul> 
    <li> 
     <img src ="http://bokertov.typepad.com/.a/6a00d83451bc4a69e2014e8a8f894b970d-800wi" width="100px" height="100px"> 
     </li> 
    <li> <button>Select</button> 
    </li> 
    <li> 
     <img src ="http://bokertov.typepad.com/.a/6a00d83451bc4a69e2014e8a8f894b970d-800wi" width="100px" height="100px"> 
    </li> 
    <li> <button>Select</button> 
    </li> 
</ul>

和評論CSS：

#cocktails{float:left;width:419px} 
#cocktails ul{margin:0;padding:0} 
#cocktails ul li{list-style-type:none;display:inline;padding:0} 
/*#cocktails ul li img{width:150px;height:150px;display:block;float:left;padding:0 10px}*/ 
/*#cocktails ul li button{display:inline;}*/

來源

2012-08-03 15:31:57 Vikram

http://jsfiddle.net/8KWGJ/3/

我將<li>左移了，而不是其中的按鈕和圖像

來源

2012-08-03 14:24:26 Andy

將float從圖像更改爲li。

DEMO

#cocktails ul { 
    margin:0; 
    padding:0; 
} 
#cocktails ul li{ 
    list-style-type:none; 
    display:inline; 
    float: left; 
    padding:0; 
} 
#cocktails ul li img{ 
    width:150px; 
    height:150px; 
    display:block; 
    padding:0 10px; 
} 
#cocktails ul li button { 
    display:block; 
}

來源

2012-08-03 14:24:46 sachleen

設置你的圖像display:block;和李書福float:left;應該解決您的問題。

Example

我已經刪除所有的CSS的，只有爲您解決問題所需的implimented。

來源

2012-08-03 14:25:50

你可以做這樣的事情：JSFIDDLE

變化

#cocktails ul li{list-style-type:none;display:inline;padding:0} 
#cocktails ul li img{width:150px;height:150px;display:block;float:left;padding:0 10px} 
#cocktails ul li button{display:block;float:left}

到

#cocktails ul li{list-style-type:none;display:inline;padding:0;float:left;} 
#cocktails ul li img{width:150px;height:150px;display:block;padding:0 10px} 
#cocktails ul li button{display:block;margin:auto}

來源

2012-08-03 14:25:50 amiregelz

添加

clear:both;爲按鈕和圖像。也給一些按鈕的餘量。

#cocktails{float:left;width:419px} 
#cocktails ul{margin:0;padding:0} 
#cocktails ul li{list-style-type:none;display:inline;padding:0;} 
#cocktails ul li img{width:150px;height:150px;display:block;float:left;padding:0 10px; clear: both;} 
#cocktails ul li button{display:block;float:left;clear:both; margin-left: 60px;}

http://jsfiddle.net/8KWGJ/8/

有時顯示模塊不能正常工作。所以在這個使用清除顯示：塊;您可以清除左側，右側或兩者。所以按照要求使用清楚。

希望這會有所幫助。

來源

2012-08-03 14:27:48 Narendra

這對我來說訣竅。

#cocktails ul{margin:0;padding:0} 
#cocktails ul li{list-style-type:none; width:150px; float:left; margin:10px;} 
#cocktails ul li img{width:150px;height:150px; } 
#cocktails ul li button{ margin-left:50px; width:50px}

來源

2012-08-03 14:33:53 gildra

如何使圖像和按鈕內聯列表？

回答

相關問題