Question

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

使用第一个div，我设置了background-image属性来设置background-image ... 当然，将显示属性设置为内联... 但问题是它们是在同一条线上，但不完全相同......

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

Answer 1

这是由于行高。如果你为一个元素添加高度，其中的文本究竟在哪里？也就是说，

如果你有一个font-size的文本块：10px（理论高度：10px）在一个60px的容器里面，文本到底会在哪里结束？

最可靠的是在容器的顶部，因为文本只能在文本流动的位置定位，高度：10px空间。

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

礼貌：Andres Ilich

Answer 2

为什么不在两者上使用浮动？

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

Answer 3

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

如果你坚持inline-block，有时候end-start标签需要在同一条线上：

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

丑陋，我试图用一百万个赞成这个（this one?）的upvotes找到这个问题，但有时是必要的。如果我记得，我认为评论也有效。

Answer 4

您可以尝试将style =“float：left”添加到两个div中。

Answer 5

使用float:left

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

DEMO

将两个div放在同一条线上的方法是什么？

5 个答案: