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;

}

我怎样才能让它们集中在我的标题下方的一行中?如果可能,我希望标题和导航栏按钮之间没有垂直空白。

谢谢。

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 回答