CSS：如何解决超链接对齐问题？

Question

我有两个链接：购物者和商店。这两个链接都有自己独立的左浮动和右浮动。 Store 链接应该位于右浮动中，但当向左浮动添加边框样式时，它会从其 div 中弹出。我怎样才能把它放回原位？请查看 http://jsfiddle.net/JuCKU/ 示例。

我完全忘记用新代码更新 jfiddle 。 http://jsfiddle.net/JuCKU/3/

firefox 存在对齐问题，而 google chrome 似乎存在对齐问题正确渲染布局。

Answer 1

将宽度从 50% 降低到 49%。由于有边框，它会占用空间，并且通过为每个 div 指定 50% 的宽度，总数有点太宽，并且第二个 div 会向下弹出一点。或者摆脱边界。

jsFiddle 示例

更改

#shopper, #store
{
    width: 50%;
    text-align: center;
}

为：

#shopper, #store
{
    width: 49%;
    text-align: center;
}

Answer 2

这是一个舍入问题。这不是四舍五入的问题，50%+50%+1px边框已经超过100%了。使宽度略小于 50% 是一个快速解决方案。

更改此：

#shopper, #store
{
    width: 50%;
    text-align: center;
}

为此：

#shopper, #store
{
    width: 49.9999%;
    text-align: center;
}

http://jsfiddle.net/JuCKU/4/

Answer 3

简单地在您的 shopper div 中给出 margin-right:-1px

#shopper
{
    float: left;
    border-right: 1px solid #ccc;
    margin-right:-1px;
}

检查这个 http://jsfiddle.net/JuCKU/6/

OR

您可以使用 css3 box-sizing 属性来实现此目的，但它直到 为止都有效IE8 &多于。

检查这个http://jsfiddle.net/JuCKU/7/

Answer 4

添加边框会将框的整体大小增加到 50%+1px，因此它们的总宽度大于 100%，并且必须给予一些东西。

您可以使用 CSS3 属性 box-sizing:border-box 将边框合并到总宽度的 50% 中，或者更具体地说，在 Firefox 中为 -moz-box-sizing，在 Firefox 中为 -webkit-box-sizing Chrome/Safari 以及 Opera 中简单的框大小调整。不幸的是 IE 还不支持这一点。

因此，将其添加到您的代码中。

#shopper, #store {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

更多信息 - http://www.css3.info/preview/box-sizing/

正如其他人所提到的，跨所有浏览器的防弹解决方案是将框的宽度减少到略小于 50%。

Answer 5

给 div 一些宽度，

请参阅 http://jsfiddle.net/JuCKU/1/