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

Question

為了使這兩個項目相互內聯，每個列表項都有一個圖像和按鈕，按鈕應位於每個圖像的下方：即

<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/

Answer 1

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

我漂浮了<li>左側，而不是里面的按鈕和圖像

Answer 2

在li標簽中包含按鈕：

<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;}*/

Answer 3

將浮動從圖像更改為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;
}

Answer 4

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

例

我已經刪除了所有的CSS並且僅僅提出了解決問題的必要條件。

Answer 5

你可以這樣做： 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}

Answer 6

加

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/

有時顯示塊不起作用。 所以在使用中使用display：block; 您可以清除左，右或兩者。 因此，根據要求使用clear。

希望這可以幫助。

Answer 7

這對我有用。

#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}