Question

我有一个名为Buttons的div，100% width位于浮动sidebar内。侧边栏有30% width。

在div Buttons内，我有四个带背景图片的链接。我想将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;}

Answer 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的一半按钮宽度使它们居中。

这可以满足您的需求吗？

Answer 2

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

在text-align: justify元素

#buttons

添加宽度为100％的#buttons:after伪元素以强制按钮填充整个侧边栏

这是working example on 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/

在div中传播四个图像[响应]

2 个答案: