Центрираните елементи, разделени с нов ред, не се подравняват правилно във Firefox

Създавам поле за вход, където цялото съдържание е центрирано. Имам абзац от текст, две полета на формуляр, подредени едно върху друго, и бутон. Полетата на формуляра имат еднаква ширина и аз ги подреждам просто като поставям нов ред (<br />) между тях.

Тъй като към цялата кутия е приложено text-align: center;, бихте помислили, че двете полета на формуляра ще се подредят точно, нали (едно върху друго с двата ръба, подравнени перфектно, тъй като са с еднаква ширина)? Във Firefox обаче второто поле на формуляра е изместено надясно с може би 1 или 2 пиксела.

Какво причинява това? Самото прекъсване на линията заема ли много малко място и следователно отхвърля центрирането? Ако е така, как да го предотвратя?


html line-breaks center firefox text-align
person daGUY    schedule 29.07.2011    source източник

Отговори (1)


arrow_upward
1
arrow_downward

Първо, прекъсването на реда не създава никакво разстояние преди или след съдържанието около него, така че не прекъсването на реда причинява проблеми с разстоянието. Пълен примерен код би помогнал, но проверете следното, защото това работи и ги подравнява перфектно във firefox:

<div style="text-align: center;">
  Some text<br />
  <input type="text" style="width: 150px;"><br />
  <input type="text" style="width: 150px;">
</div>

Първо проверете типа документ на вашата страница. Уверете се, че го декларирате правилно (xhtml като се има предвид, че затваряте вашия нов ред). Освен това, като се има предвид, че ви уверявам, че прекъсванията на редовете не поставят нещата след тях, трябва да опитате да премахнете кода си, докато откриете причината. Може да имате непрекъснат интервал преди едно от полетата за въвеждане (вижте http://www.htmlbasictutor.ca/non-breaking-space.htm, защото не знам как да накарам stackoverflow да запише този знак), което би го преместило, или бихте могли да имате някакъв css, даващ марж на един от тях. Може да имате плаващ елемент над тях, който навлиза в един и го премества.

Ако всичко друго се провали, просто ги поставете в техните собствени div, вместо да използвате нов ред. Опаковането на нещо в div ще има същия ефект. Също така можете да направите ясно: и двете; върху div, за да се уверите, че нищо плаващо над него не го засяга.

person Frug    schedule 29.07.2011
comment
Да, този код работи добре за мен... трябва да е нещо друго на страницата, което го изхвърля тогава. Толкова е странно - ако обвия всеки вход в div, вместо да използвам нов ред, той се показва правилно. Това е достатъчно лесно и решава проблема, така че мисля да го оставя така. Благодаря! - person daGUY; 29.07.2011