how to make list inline with images and buttons? - html

Question

im tying to make these two items inline with each other, each list item has an image and button, the button should be underneath each image: i.e
<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>
The 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}
but the buttons are not positioned as expected the jsfiddle is here:
http://jsfiddle.net/8KWGJ/

Answer 1

enclose buttons in li tags :
<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>
and comment css as shown:
#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 2

http://jsfiddle.net/8KWGJ/3/
I floated the <li> left, instead of the button and image inside it

Answer 3

Change the float from the image to the 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

Setting your image to display:block; and the li to float:left; should solve your problem.
Example
I've removed all of your CSS and implimented only the required to solve your problem.

Answer 5

You can do something like this: JSFIDDLE
Change
#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}
to
#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

Add
clear:both; for the buttons and images.
Also give some margin to the button.
#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/
Sometimes display block does not work. So in that use clear with display:block; You can clear either left,right or both. So use clear as per the requirement.
Hope this helps.

Answer 7

This did the trick for me.
#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}