html - CSSクラスの背景画像の水平位置？

Question

だから私はFacebook/youtube /twitterボタンを幅318ピクセルのdivに配置しようとしています（ボタンあたり約106ピクセル）。

期待されるOuput

_{（出典：iforce.co.nz）}

レンダリング時に各ボタンでfloatとdisplay：inlineを使用しています。以下にコードを提供しました。

CSSコード

#socialController{
width: 318px;
background-color:#fff;
display: inline;
}
.socialmedia
{
width:106px;
height:20px;
float:left;
vertical-align:middle;
background-position:center center;
background-repeat:no-repeat;
background-color:#373737;
}
.socialmedia:hover{
background-color:#444
}
#sm_fb{
background-image:url(../img/fb.png)
}
#sm_tw{
background-image:url(../img/tw.png)
}
#sm_yt{
background-image:url(../img/yt.png)
}

HTMLコード

<div id="socialController">
<a href="#" class="socialmedia" id="sm_fb" title="CSGONZ Facebook"></a>
<a href="#" class="socialmedia" id="sm_yt" title="CSGONZ Youtube"></a>
<a href="#" class="socialmedia" id="sm_tw" title="CSGONZ Twitter"></a>
</div>

しかし、問題は、期待した水平方向の位置に到達していないことです。代わりに、ボタンの垂直方向の位置を取得しています。

実際の出力

_{（出典：iforce.co.nz）}

何が問題ですか？そして私は何が欠けていますか？水平レイアウトを実現するには？

score 3 · Accepted Answer

これを試してみましょう：

#socialController {
width: 318px;
background-color:#fff;
display: block;
}

このような：

http://jsfiddle.net/CQTus/

score 1 · Accepted Answer

表示：インラインブロック; socialControllerではなくsocialmediaに適用する必要があります

score 1 · Accepted Answer

ボタンを横一列に表示するには、リストを使用する必要があると思います。

これを試してください：これはCSSの水平メニューのチュートリアル（ソースコード付き）です。

お役に立てば幸いです:)

score 1 · Accepted Answer

1

ここでデモを確認してください - http://jsfiddle.net/6PaY4/

お役に立てれば！

于 2012-06-11T08:07:47.217 に答える

score 1 · Accepted Answer

私はそれがグリッチを引き起こしているCSSの何かであると考えました.答えと安心をありがとう:)

score 1 · Accepted Answer

あなたのコードは現状では完全に有効です...

私があなたのコードから作った例を見てください

他の場所でエラーが発生している必要があります。指定したスタイルをオーバーライドする css 内の別の宣言を探します。次のような宣言が 1 つ必要です:a{display:block}それに応じて変更します。

score 1 · Accepted Answer

次のように目標を達成できます。

この実用的なフィドルの例を参照してください!

ここに画像の説明を入力

CSS

#socialController{
  width: 318px;
  background-color:#fff;
  display: block;         /* display the wrapper as a block */
}
.socialmedia {
  width:106px;
  height:20px;
  display:block;          /* display the element as a block */
  float:left;             /* float the elements to place them side by side */
  background-position:center center;
  background-repeat:no-repeat;
  background-color:#373737;
}

html - CSSクラスの背景画像の水平位置？

7 に答える 7

Related

Reference