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

Question

我有两个链接：购物者和商店。这两个链接都有自己独立的左右花车。 Store链接应该处于正确的浮动状态，但在向左侧的浮动框添加边框样式时，它会从其div中快照。我如何恢复到原位？例如，请看http://jsfiddle.net/JuCKU/。

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

firefox有对齐问题，而谷歌浏览器似乎正确呈现布局。

Answer 1

掉落的宽度从50％至49％。既然你有一个边框，它占用了空间，并给每个div 50％的宽度，总的有点太宽，第二个div弹出一点。或者摆脱边界。

jsFiddle例

变化

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

到：

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

Answer 2

给的div一些宽度

看到http://jsfiddle.net/JuCKU/1/

Answer 3

这是一个四舍五入的问题。这不是一个四舍五入的问题，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 4

添加边界增加了箱子的整体尺寸，以50％+ 1像素，所以一起他们的组合宽度大于100％，而且必须给予。

您可以使用CSS3属性box-sizing:border-box将边框合并到Firefox的全部50％宽度或更具体的-moz-box-sizing中，在Chrome/Safari中使用-webkit-box-sizing，并将框中的大小歌剧。不幸的是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

简单给margin-right:-1px在shopper div

#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/