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/

您遇到问题的原因是绝对定位的元素不占用布局中的空间。只有文本跨度获得了bg-color，因为它是.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;
}

Answer 2

问题是您的div#btn_container没有任何尺寸，因为<img>里面有absolute定位

位置：绝对

元素从正常文档流中删除;没有为页面布局中的元素创建空间...

详细了解MDN上的position。

一种可能的解决方案是删除.btn img位置属性。在此方案中，默认设置为static（请注意top，right，bottom，left和z-index属性在position: static时没有效果，这就是为什么我在下面的代码片段中评论这些内容。我还删除了边距以将图像保留在容器<div>中）：

＆＃13;

.btn
{
    position: relative;
    margin-bottom:20px;
    padding: 0 10px;
    text-align: left;
    font-size: 16px;
    color: #333;
    background:gray;
    display: inline-block;
}

#btn_container
{
    border-radius:5px;
    background:red;
    position: relative;
}

.btn img
{
    /* static psoitioning don't care about position props like:
    left: 50%; top: 50%;*/
    /* remove margins to keep image inside the container div
    margin-left: -15px; margin-top: -15px;*/
    /*position: absolute;*/ /* line removed */
}

.btn span
{
    display:inline-block;
    vertical-align:middle;
}

＆＃13;

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

＆＃13;

Answer 3

删除display: inline-block;。

Answer 4

如果你摆脱了位置：.btn img上的绝对位置会有所帮助 - 我只是玩它来看看。

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

4 个答案: