4

我想让这两个项目相互内联，每个列表项都有一个图像和按钮，按钮应该在每个图像下方：即

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

4

7 回答 7

1

将按钮包含在 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;}*/
于 2012-08-03T15:31:57.327 回答
1

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

我向左浮动<li>，而不是里面的按钮和图像

于 2012-08-03T14:24:26.297 回答
0

这对我有用。

#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-03T14:33:53.237 回答
0

将浮动从图像更改为li.

演示

#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-03T14:24:46.367 回答
0

将您的图像设置为display:block;和 li to float:left;应该可以解决您的问题。

例子

我已经删除了你所有的 CSS，并且只暗示了解决你的问题所需的内容。

于 2012-08-03T14:25:50.353 回答
0

你可以这样做：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}

​ ​</p>

于 2012-08-03T14:25:50.380 回答
0

添加

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/

有时显示块不起作用。因此，在使用 clear 时使用 display:block; 您可以清除左、右或两者。所以根据要求使用 clear 。

希望这可以帮助。

于 2012-08-03T14:27:48.757 回答