如何将<div>和<img/>保持在<div>对齐</div> </div>之外

Question

我有以下CSS代码：

.blackbox {
    background: black;
    width: 17px;
    height: 18px;
    line-height: 18px;
    text-align: center;
}

在我的HTML文件中，我调用以下内容。

<div class="blackbox">
  10
</div>
<img src="icon-local.png">
<img src="icon-national.png">

如何保持通过CSS调用呈现的框以及通过img标记在同一水平线上调用的图像？

目标是创建与此类似的东西，但在其他图标前面放置CSS框。示例图片：Example Image

提前致谢！

肯

Answer 1

您可以使用display:inline-block或display:table。

<div class="parent">
    <div class="blackbox">10</div>
    <img src="icon-local.png" />
    <img src="icon-national.png" />
</div>

和css

.parent div, .parent img {
    display:inline-block;
    *display:inline; /* IE7 hack */
    zoom:1 /* IE7 */
    vertical-align:middle;
}

Answer 2

制作黑盒子类inline或inline-block：

.blackbox {
    display:inline-block;
    background: black;
    width: 17px;
    height: 18px;
    line-height: 18px;
    text-align: center;
}

Answer 3

<div>元素的默认显示是“阻止”（也就是说，它在它之前和之后添加换行符），因此您可以使用：

.blackbox {
    background: black;
    width: 17px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    display: inline;
}

注意display: inline;

此外，display: inline-block;在许多情况下也很有用。

Answer 4

您需要将div定义为display:inline-block并将图像浮动到左侧，以便与示例图像具有相同的结果。如果您更改HTML并在div之前显示图像，则可以避免浮动图像。请参阅此演示：http://jsfiddle.net/G5Q4k/1/