1

だから私は自分のウェブサイト用の一連のナビゲーションボタンを作成しましPhotoshopた。ボタンを一元化したいのですが、さまざまなCSSマージンステートメントまたはフロートステートメントを使用するとボタンが一元化されますが、同じ行ではなく 1 x 4 列にあります ( 4 ボタン）。

私のサイトのバナーは一元化されており、ボタンをその下に一元化したいと考えています。これが私のコードです：

HTML

<div id="home" class="home">
<img title="Home" src="images/images/home.jpg">
</div>

<div id="iwb" class="iwb" align="center;">
<img title="IWB" src="images/images/iwb.jpg">
</div>

<div id="presentations" class="presentations">
<img title="Presentations" src="images/images/presentations.jpg">
</div>

<div id="internet" class="internet">
<img title="internet" src="images/images/net.jpg">
</div>

CSS

.home {
display: block;
width: 188px;
height: 50px;
background: url(images/images/home.jpg) bottom;
text-indent: -99999px;
  }

.home:hover {
background-position: 0 0;
}

.iwb {
display: block;
width: 188px;
height: 50px;
background: url(images/images/iwb.jpg) bottom;
text-indent: -99999px;
}

.iwb:hover {
background-position: 0 0;
}

.presentations {
display: block;
width: 188px;
height: 50px;
background: url(images/images/presentations.jpg) bottom;
text-indent: -99999px;
}
.presentations:hover {
background-position: 0 0;
}

.internet {
display: block;
width: 188px;
height: 50px;
background: url(images/images/net.jpg) bottom;
text-indent: -99999px;

}
.internet:hover {
background-position: 0 0;

}

それらを一元化するにはどうすればよいですか?ただし、ヘッダーのすぐ下にある 1 つの行全体に渡りますか? 可能であれば、ヘッダー ボタンとナビゲーション バー ボタンの間に垂直方向の空白を入れないようにします。

ありがとう。

4

1 に答える 1

0

それらを同じ行に表示したい場合は、display: inline-blockorfloat: leftの代わりに使用する必要がありdisplay : blockます。

インライン ブロックの例は、こちらで確認できます。

http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

編集：

を使用する場合は、以下のようdisplay:inline-blockに使用する必要がありfont-size:0ます。

http://jsfiddle.net/xXVCg/1/

したくない場合はfont-size:0、以下のように使用する必要がありfloat:leftます。

http://jsfiddle.net/xXVCg/

于 2012-10-21T11:20:59.453 に答える