如何将按钮/输入保留在图像下方？

Question

我的想法是有6个带有按钮的项目（图片）能够点击数量和添加到购物篮，但是我的CSS不足。

我有6 div个controlpic。我发现，输入和按钮位于右侧，而不是保留在图像下方。

.controlpic{
  overflow: auto; 
}
		

<div class="controlpic">
  <img class="img" src="jsbook1.png">
  <button class "clear">-</button>
  <input>
  <button>+</button>
</div>

Answer 1

尝试将此添加到您的css

.controlpic img{
   display:block;
}

Answer 2

以下是您要查看的代码段： https://jsfiddle.net/sc3y8z83/

我希望这有帮助！

<强> HTML

<div class="controlpic">
  <img class="img" src="http://orig09.deviantart.net/b7a4/f/2012/062/d/5/blue_icon_pattern_by_killer_icons-d4rkk2f.jpg">
  <button class="clear">-</button>
  <input type="text">
  <button>+</button>
</div>

<强> CSS

.controlpic{
   overflow: auto;
}
.img{
  display: block;
  width: 52px;
  height: 52px;
  margin-bottom: 10px;
}