Wyrównanie pionowe etykiety CSS z polami wejściowymi

Projektuję układ formularza, który będzie uesd na wielu stronach w systemie internetowym. Od wielu lat jestem zagorzałym użytkownikiem tabel do tego celu, jestem teraz całkiem przyzwyczajony do używania etykiet CSS +.Wyrównanie pionowe etykiety CSS z polami wejściowymi

Jedna rzecz, którą muszę jeszcze opanować, to sposób, w jaki różne przeglądarki umieszczają etykietę względem pola wejściowego. Podam przykład kodu oraz powiększony obraz tego, jak renderuje się w każdej przeglądarce (IE = IE9).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
    <title>HTML template</title> 
    <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /> 
    <link rel="stylesheet" type="text/css" href="reset.css" /> 
    <style> 
body { 
    font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif; 
    font-size:13px; 
    font-style:normal; 
    font-weight:normal; 
    letter-spacing:normal; 
    margin:20px; 
} 
input { 
    font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif; 
    border:solid 1px #666; 
    width:150px; 
} 
.fld { 
} 
.usr { 
    border:solid 1px red; 
} 
p { 
} 
</style> 
</head> 
<body> 
<p> 
    <label class="usr" for="email">Email*</label> 
    <input class="fld required email" type="text" name="email" id="email" value="Capital Letter"> 
</p> 
</body> 
</html>

OK - teraz mogę opublikować zdjęcie - oto jak wygląda po zmianach Ahmeda Masuda. Miał rację - plik reset.css, który miałem (od http://html5reset.org/) nie miał dopełnienia na elemencie wejściowym. Jednak nawet po zastosowaniu zmian nadal występuje zmiana w wyrównaniu podstawy tekstu w etykiecie w porównaniu z wyrównaniem na wejściu. Teraz Firefox jest w stanie martwym, a dla IE & Chrome tekst etykiety jest o 1px wyższy.

enter image description here

Jeśli usunąć link reset.css, rzeczy zmienić ponownie: Chrome staje się martwa poziomie, IE stawia etykieta 1px wyższa niż tekstu wejściowego, Firefox 1px niższy niż tekstu wejściowego. Patrz poniżej:

enter image description here

muszę podkreślić, że jest to bardzo prosty układ, po prostu spróbować zdiagnozować problem. Sprawię, że będzie wyglądać lepiej później. Najpierw jednak muszę wiedzieć, jak ustawić cały tekst we wszystkich przeglądarkach za pomocą jednego rozwiązania CSS.

Źródło

2011-12-19 TMA-1

Czy możesz wysłać swój reset.css oraz pl łatwość? –

Jest to z html5reset.org - dodał link powyżej, wraz z odpowiedzią na odpowiedź poniżej. –

Okay wyrównania CSS są nieco czarnej sztuki z CSS2 więc powiem ci, co się dzieje:

1) reset.css masz prawdopodobnie nie jest resetowanie padding elementu wejściowego, dlatego są coraz że poza błędami 1/2 piksela

spróbuj dodać je do swojego stylu

Więc jedno jest usunąć ten wyściółkę z wejścia:

input { padding: 0 }

Będziesz teraz musiał ustawić wysokość obu elementów etykiety i wejściowe:

.fld { height: 16px; } 
.usr { height: 16px; }

Inną rzeczą jest to, że prawdopodobnie chcesz wyrównać pola ładnie jedna pod drugą. Jednym ze sposobów, aby to osiągnąć jest, aby etykietę blok z pływakiem lewej własności:

.usr { display: block; float: left; }

i .fld blok, a także:

.fld { display: block }

chciałbyś dodać jakieś inne parametry do p aby rendering był bardziej estetyczny.

Oto co zrobiłem do pliku:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
    <title>Southrock HTML template</title> 
    <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /> 
    <link rel="stylesheet" type="text/css" href="reset.css" /> 
    <style> 

body { 
    font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif; 
    font-size:13px; 
    margin:20px; 
} 

input { 
    border:solid 1px #666; 
    width:150px; 
    padding: 0; 
    height: 16px; 
} 

.fld { } 

.usr { 
    border:solid 1px red; 
    height: 16px; 
    display: block; 
    float: left; 
    margin-right: 5px; 
    width: 7em; 
} 

p { 
    clear: both; 
    margin-bottom: 5px; 
} 




</style> 
</head> 
<body> 
<p> 
    <label class="usr" for="email">Email*</label> 
    <input class="fld required email" type="text" name="email" id="email" value="Capital Letter"> 
</p> 
<p> 
    <label class="usr" for="email">First Name*</label> 
    <input class="fld required email" type="text" name="fname" id="fname" value="Capital Letter"> 
</p> 
</body> 
</html>

Czyni się tak samo w IE/Safari/FF/Opera

Źródło

2011-12-19 05:54:24

Dziękuję za poświęcenie czasu na odpowiedź - zredagowałem moje oryginalne pytanie powyżej, aby uwzględnić wprowadzone zmiany. Nadal nie dostaję perfekcyjnego wyrównania niestety. –

To jest starsze pytanie, ale nadal aktualne w maju 2016. Powodem, dla którego pracował dla Ahmeda w jego odpowiedzi, a nie dla ciebie, jest to, że używasz ZOOM. Uważam, że obecnie zmagam się z tym samym problemem co ty. Za każdym razem, gdy robię to idealnie, w FF, gdy ZOOM w którymś momencie etykieta porusza się w górę. Tak więc dostosowuję CSS, aby zepchnął go z powrotem, ale problem z tym polega na tym, że następnym razem, gdy zmienię zoom, będzie on ponownie wyłączany w drugą stronę. Bardzo frustrujące. Próbowałem wielu rozwiązań i żaden nie jest w 100%. Ponadto, czasami zmiana czcionki spowoduje jej wyrównanie również ... – PerryCS

[Loguje się do stackoverflow po raz pierwszy od lat - wow - to miało 10.000 wyświetleń!] To nie był związany z zoomem. Ale to było tak dawno temu, zanim pojawił się bootstrap i sprawił, że wszystko działało w szerokim zakresie przeglądarek. Więc ... może powinienem to zamknąć ... –

Jest jeden sposób, aby wyrównać:

<span> 
    <label>Email</label> 
    <input type="text" name="email" /> 
</span>

CSS:

form span { 
    vertical-align: middle; 
    display: block; 
    width: 100%; 
} 
form label { 
    display: inline-block; 
    float: none; 
    width: 150px; 
    padding: 0; 
    margin: 5px 0 0; 
    text-align: left; 
} 
form input { 
    display: inline-block; 
    float: none; 
    width:auto; 
    margin:5px 0 0 10px; 
    padding:5px 5px; 
}

Źródło

2013-05-29 18:31:15 Damian

Wyrównanie pionowe etykiety CSS z polami wejściowymi

Odpowiedz

Powiązane problemy