CSS: как я могу исправить проблему выравнивания гиперссылки?

Question

У меня есть две ссылки: покупатель и магазин. Обе эти ссылки содержат собственные левые и правые поплавки. Предполагается, что ссылка на хранилище находится в правом поплавке, но она выгружается из своего 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

Дайте дивы некоторые ширины

см 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% + 1px, так что вместе их общая ширина превышает 100%, и что-то нужно дать.

Вы можете использовать свойство CSS3 box-sizing:border-box, чтобы включить границу в общую ширину 50% или, более конкретно, размер -moz-box в Firefox, -webkit-box-size в 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

просто дать margin-right:-1px в вашем shopper div

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