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;，将li设置为float:left;可以解决您的问题。

Example

我删除了所有的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}

如何使列表与图像和按钮内联？

7 个答案: