0

我有以下 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 框位于其他图标的前面。示例图像：示例图像

提前致谢！

肯

4

4 回答 4

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;
}
于 2013-03-19T13:10:36.853 回答
0

制作你的黑盒类inline或inline-block：

.blackbox {
    display:inline-block;
    background: black;
    width: 17px;
    height: 18px;
    line-height: 18px;
    text-align: center;
}
于 2013-03-19T13:09:23.663 回答
0

元素的默认显示<div>是“块”（也就是说，它在它之前和之后添加一个换行符）所以你可以使用：

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

注意display: inline;

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

于 2013-03-19T13:09:37.790 回答
0

您需要定义divasdisplay:inline-block并将图像向左浮动，以便获得与示例图像相同的结果。如果您更改 HTML 并将图像放在 div 之前，则可以避免浮动图像。看这个演示：http: //jsfiddle.net/G5Q4k/1/

于 2013-03-19T13:13:59.437 回答