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/