2

我使用了两个 div...一个用于显示图像...一个用于显示文本...

在第一个 div 中，我设置了 background-image 属性来设置 background-image...当然，将 display 属性设置为内联...但问题是它们在同一行，但并不完全相同。 ..

    <div class="div_with_image"></div>
    <div style="display:inline">Text</div>

这是css文件

.div_with_image{
  background-image: url(../beacon/images/icon-plus.png);
  width: 16px;
  height: 16px;
  cursor: pointer;
  display: inline-block; 
}

但是图像显示得比文字略高......我无法解决它......我需要你的帮助......谢谢，Zac。

4

5 回答 5

3

这是由于线高。如果你给一个元素添加高度，它里面的文本到底在哪里？那是，

如果你有一个字体大小为：10px（理论高度：10px）的文本块在一个 60px 的容器内，文本到底会在哪里结束？

最肯定是在容器的顶部，因为文本只能将自身定位在文本流动的地方，在 height:10px 空间内。

但是您可以通过使用与容器高度相同的 line-height 值来克服这个问题，这样文本将采用 vertical-align 属性并正确对齐自身

礼貌：安德烈斯·伊利奇

于 2013-06-14T08:26:51.907 回答
1

你为什么不在两者上都使用浮点数？

html代码：

<div class="div_with_image"></div>
<div style="float:left;">Text</div>

CSS代码：

.div_with_image{
  background-image: url(../beacon/images/icon-plus.png);
  width: 16px;
  height: 16px;
  cursor: pointer;
  float:left;
}
于 2013-06-14T08:23:51.723 回答
0

您可以尝试将 style="float:left" 添加到两个 div。

于 2013-06-14T08:29:33.960 回答
0

您是否尝试过float元素而不是使用inline-block？

如果你坚持inline-block，有时结束开始标签需要在同一行：

<div class="div_with_image"></div><div
    style="display:inline">Text</div>

丑陋，我试图用一百万个赞成票来解决这个问题（这个？），但有时是必要的。如果我记得的话，我认为评论也有效。

于 2013-06-14T08:23:09.690 回答
0

利用float:left

<div class="div_with_image"></div>
    <div style="float:left">Text</div>

演示

于 2013-06-14T08:38:05.210 回答