CSS：如何解决我的超链接对齐问题？答案

【问题标题】：CSS: how do I fix my hyperlink alignment issue?CSS：如何解决我的超链接对齐问题？
【发布时间】：2012-02-14 00:41:30
【问题描述】：

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

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

firefox 出现对齐问题，而 google chrome 似乎可以正确呈现布局。

【问题讨论】：

首先，您的意思是您的最后一个 CSS 规则选择器是 #shopper, #store？我也没有发现 Chrome 17 上的布局有任何问题。
你能在布局中断的地方提琴吗？我为#shopper 添加了一个边框，但一切都保持原样。
@Hersha 看看jsfiddle.net/JuCKU/3
我没有看到使用 Safari 的 your jsFiddle 有任何损坏。

标签： css alignment

【解决方案1】：

将宽度从 50% 降低到 49%。因为你有一个边框，它占用了空间，并且通过给每个 div 50% 的宽度，总有点太宽了，第二个 div 弹出了一点。或者摆脱边界。

jsFiddle 示例

改变

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

收件人：

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

【讨论】：

感谢您的解释。即使我不喜欢 IE，我仍然想加入 IE 用户。更改宽度似乎更像是一种通用的浏览器修复。

【解决方案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/

【讨论】：

这实际上更像是一个盒子模型问题。边框绘制在元素外部，因此使其大于您定义的边框，因此 div 的实际宽度应为 50% - （边框宽度）。您可以在元素内绘制边框，但我现在忘记了如何做到这一点。
@Hersha 这就是我所意识到的，因此进行了编辑。关于在框内渲染边框，您是否在考虑box-sizing？ w3.org/TR/css3-ui/#box-sizing
是的，这就是我想要的属性。

【解决方案3】：

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

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

查看http://jsfiddle.net/JuCKU/6/

或

您可以为此使用 css3 box-sizing 属性，但直到 IE8 及以上为止。

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

【讨论】：

应用负边距的问题是您的其余内容会随之移动。如果您有任何其他边框与之对齐，这可能会使事情看起来很有趣。
@Hersha 我首先根据 OP Mark-Up 给出两个答案，然后如果 OP 在上面添加任何新内容。
我知道。只是指出你的第一种方法的副作用，而不是试图打折它。 :)

【解决方案4】：

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

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

所以将它添加到您的代码中。

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

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

【讨论】：

【解决方案5】：

给 div 一些宽度

见http://jsfiddle.net/JuCKU/1/

【讨论】：