html - 如何使背景颜色覆盖我的整个 DIV 而不仅仅是其中的文本？

Question

我有一个包含图像和文本的 DIV ...

<div id="control" class="btn">

<div id="btn_container"><img width="100" height="100" src="https://cdn3.iconfinder.com/data/icons/minecraft-icons/512/Stone_Pickaxe.png" alt="Mining pick" /></div>

<span>Start</span> 

</div>

我想在我的 DIV 中有一个背景色，所以我这样做了

.btn
{
    position: relative;
    margin-bottom:20px;
    padding: 0 10px;
    text-align: left;
    font-size: 16px;
    color: #333;
    background:gray;
    display: inline-block;
}

但是背景颜色只出现在我的图像上，而不出现在 DIV 中 -- https://jsfiddle.net/xwdnvcy5/17/ .如何使背景颜色出现在整个 DIV 中？我不希望在我的 DIV 中对高度和宽度进行硬编码，因为我打算将此类用于其他元素。

Answer 1

问题出在绝对定位的 img 上，我已经修改了链接。如果您想在元素周围移动，请使文本跨度相对。 https://jsfiddle.net/sandeepcnath/xwdnvcy5/19/

出现问题的原因是绝对定位的元素不会占用布局中的空间。只有文本范围会变成背景色，因为它是 .btn 中唯一占用空间的元素。

.btn
{
    position: relative;
    margin-bottom:20px;
    padding: 0 10px;
    text-align: left;
    font-size: 16px;
    color: #333;
    background:gray;
    border-radius:5px;
    display: inline-block;
    text-align: center;
}

#btn_container
{
}

.btn img
{

}


.btn span
{
    display:-block;
    vertical-align:middle;
}