Wyrównywanie tekstu i zaznaczanie pól do tej samej szerokości w CSS?

Question

Apr 03, 2012, 10:58 PM

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ć.