0

我在一个浮动的 div 中调用Buttons了一个 div 。侧边栏有.100% widthsidebar30% width

在 divButtons中，我有四个带有背景图像的链接。我想将 div 内的四个链接居中，但它们必须展开（都具有相同的边距，但左边的应该完全左边，右边的应该完全右边）。但是：它也应该在我的响应式网站中工作。因此，如果我调整窗口大小，它们也必须居中。这就是为什么我不能以像素为单位设置边距。

请帮我！

对不起我的英语不好。

[编辑：我的代码]：

HTML：

<div id="sidebar">
    <div id="buttons">
        <a id="twitter" href="http://www.twitter.com" title="Twitter" target="_blank"></a>
        <a id="facebook" href="http://www.facebook.com" title="Facebook" target="_blank"></a>
        <a id="rss" href="rss.php" title="RSS" target="_blank"></a>
        <a id="youtube" href="http://www.youtube.come" title="YouTube" target="_blank"></a>
    </div>
</div>

CSS：

#sidebar{
    float:right;
        width:30%;
    text-align:center;
}

#buttons{
    width:100%;
}

#twitter,#facebook,#rss,#youtube{
    height:40px;
    display: inline-block;
    margin-top:20px;
}


#twitter{width:40px;}
#twitter{background:url('/images/icons.png') 0 0;}
#facebook{width:40px;}
#facebook{background:url('/images/icons.png') -40px 0;}
#rss{width:40px;}
#rss{background:url('/images/icons.png') -80px 0;}
#youtube{width:40px;}
#youtube{background:url('/images/icons.png') -120px 0;}
4

2 回答 2

1

看到你的代码肯定会有所帮助，但我猜你正在寻找这样的东西：

- 编辑 -

好的，看起来我们需要绝对定位这些按钮，所以尝试：

#buttons {  
  position: relative;
  min-height: 40px;
}
#buttons > a {
  position: absolute;
  width: 40px;
  height: 40px;
}

a#twitter { background: red; left: 0px; }
a#facebook { background: orange;  left: 36%; margin-left: -20px; }
a#rss { background: yellow; left: 64%; margin-left: -20px; }
a#youtube { background: green; right: 0px;}

Aaand 小提琴：http: //jsfiddle.net/ttjAW/9/

您可能需要调整left百分比，因为按钮具有固定宽度（使用固定和可变宽度元素很难做到这一点......）然后我应用了negative margin按钮宽度的一半来使它们居中。

这能满足您的需要吗？

于 2013-10-03T22:22:08.620 回答
1

text-align: justify在您的元素上使用#buttons以使按钮元素完美居中，并允许它们在空间内响应式扩展。

  • 添加text-align: justify你的#buttons元素
  • 添加一个#buttons:after100% 宽度的伪元素来强制按钮填充整个侧边栏

这是一个关于 JSbin 的工作示例。

这是适合您情况的代码：

HTML：

<div id="sidebar">
  <div id="buttons">
    <a id="twitter" href="#">1</a>
    <a id="facebook" href="#">2</a>
    <a id="rss" href="#">3</a>
    <a id="youtube" href="#">4</a>
  </div>
</div>

CSS：

#buttons {
  text-align: justify;
  width: 100%;
}

#buttons:after {
  content: '';
  display: inline-block;
  width: 100%;
}

#buttons a {
  display: inline-block;
  height: 40px;
  width: 40px;
}

此方法更完整地记录在这里：http ://www.barrelny.com/blog/text-align-justify-and-rwd/

于 2013-10-04T00:17:14.900 回答