Wyrównywanie tekstu i zaznaczanie pól do tej samej szerokości w CSS?
Ok, to wydaje się niemożliwe, aby mieć rację. Mam pole tekstowe i pole wyboru. Chcę, aby były dokładnie tej samej szerokości, aby ustawić się na lewym marginesie i prawym marginesie.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input, select {
width: 200px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br>
<select>
<option>123</option>
</select>
</body>
</html>
To by ci się udało, prawda? Nie. Pole wyboru jest o 6 pikseli krótsze w Firefoksie. Zobacz zrzut ekranu.
Ok, więc edytuj kod i stwórz dwa style.
<style type="text/css">
input {
width: 200px;
}
select {
width: 206px;
}
</style>
Ok, to działa!
Och, czekaj, lepszy test w Chrome ...
Czy ktoś może mi powiedzieć, jak je ustawić we wszystkich przeglądarkach? Dlaczego po prostu nie mogę zrobić szerokości: 200px, dlaczego wszystkie przeglądarki wyświetlają ją inaczej? Również w tym momencie, dlaczego pole tekstowe i pole wyboru różnią się wysokością? Jak uzyskać je na tej samej wysokości? Nie próbowałem wysokości i wysokości linii.
Rozwiązanie:Ok znalazłem rozwiązanie z pewną pomocą poniższych odpowiedzi. Kluczem jest użyciewielkość pudełka: obramowanie właściwość, więc gdy określisz szerokość tegozawiera granica i dopełnienie. Widziećdoskonałe wyjaśnienie tutaj. Wtedy przeglądarka nie może tego wypchać.
Kod znajduje się poniżej, należy również ustawić wysokość pól na ten sam rozmiar i wciskać tekst w polu tak, aby był wyrównany. Musisz także ustawić granicę, ponieważ Chrome ma naprawdę dziwnie wyglądającą ramkę, której używa do zaznaczania pól, które wyrzucą wyrównanie. Będzie to działać w przypadku witryn HTML5 (np. Obsługujących IE9, Firefox, Chrome, Safari, Opera itp.).
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
input, select {
width: 200px;
border: 1px solid #000;
padding: 0;
margin: 0;
height: 22px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
input {
text-indent: 4px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br>
<select>
<option>123</option>
<option>123456789 123123123123</option>
<option>123456789 123123123123 134213721381212</option>
</select>
</body>
</html>
Jedno ostatnie ostrzeżenie, które możesz nie chcieć, aby przyciski stylów, pola wyboru itp. Zostały włączone do tego stylu, więc użyjinput:not([type='button'])
nie stosować go do niektórych typów lub zastosowańinput[type='text'], input[type='password']
aby określić te, do których chcesz zastosować.