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

要素のデフォルトの表示<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

divサンプル画像と同じ結果が得られるように、 asを定義しdisplay:inline-block、画像を左にフロートする必要があります。HTML を変更し、div の前に画像を配置すると、画像のフローティングを回避できます。このデモを参照してください: http://jsfiddle.net/G5Q4k/1/

于 2013-03-19T13:13:59.437 に答える
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 に答える