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.
<code><!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> </code>
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.
<code><style type="text/css"> input { width: 200px; } select { width: 206px; } </style> </code>
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.).
<code><!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> </code>
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ć.