5

所以我试图在一个跨度为 318 像素的 div 上放置一个 facebook/youtube/twitter 按钮（因此每个按钮大约 106 像素）。

预期输出

预期布局
（来源：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)
}

代码

<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）

问题是什么？我错过了什么？实现横向布局？

4

7 回答 7

3

让我们试试这个：

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

像这样：

http://jsfiddle.net/CQTus/

于 2012-06-11T07:58:17.067 回答
1

显示：内联块；应该应用于社交媒体，而不是 socialController

于 2012-06-11T07:58:01.747 回答
1

我认为您必须使用列表在水平线上显示您的按钮。

试试这个：这是一个 CSS 水平菜单的教程（带有源代码）。

我希望它有帮助:)

于 2012-06-11T08:01:39.263 回答
1

在此处查看演示 - http://jsfiddle.net/6PaY4/

希望这可以帮助！

于 2012-06-11T08:07:47.217 回答
1

你可以像这样实现你的目标：

请参阅此工作小提琴示例！

在此处输入图像描述

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;
}
于 2012-06-11T08:18:50.013 回答
1

你的代码是完全有效的......

请参阅我从您的代码中制作的示例

您必须在其他地方有错误。在您的 css 中寻找另一个覆盖您提供的样式的声明。必须有一个这样的声明：a{display:block}相应地改变它。

于 2012-06-11T08:23:03.540 回答
1

我认为这是 CSS 中的其他东西导致了故障，感谢大家的回答和保证:)

于 2012-06-11T21:20:15.627 回答