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

Question 1

Ok, wydaje się, że nie można tego naprawić. Mam pole tekstowe i pole wyboru. Chcę, aby miały dokładnie tę samą szerokość, aby były wyrównane na lewym 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>

Tak myślisz, prawda? Nie. W przeglądarce Firefox pole wyboru jest o 6 pikseli krótsze. Zobacz zrzut ekranu. zrzut ekranu w przeglądarce Firefox

Ok, więc edytujmy kod i stwórzmy dwa style.

<style type="text/css">
    input {
        width: 200px;
    }
    select {
        width: 206px;
    }
</style>

Ok, to działa!

Naprawiono w Firefoksie

Och, czekaj, lepszy test w Chrome ...

zrzut ekranu chrome

FFFFFFFUUUUUUUUUUUU

Czy ktoś może mi powiedzieć, jak to ustawić we wszystkich przeglądarkach? Dlaczego nie mogę po prostu zrobić width: 200px na wszystkich, dlaczego wszystkie przeglądarki wyświetlają to inaczej? Skoro już o tym mowa, dlaczego pole tekstowe i pole wyboru mają różne wysokości? Jak doprowadzić je do tej samej wysokości? Próbowałem wysokości i wysokości linii bezskutecznie.

Rozwiązanie:

Ok, znalazłem rozwiązanie z pomocą poniższych odpowiedzi. Kluczem jest użycie właściwości box-sizing: border-box, aby określić szerokość obejmującą obramowanie i dopełnienie. Zobacz doskonałe wyjaśnienie tutaj . Wtedy przeglądarka nie może tego zapchać.

Kod znajduje się poniżej, ustawiliśmy również wysokość pól na ten sam rozmiar i wcięliśmy tekst w polu, aby był wyrównany. Musisz także ustawić obramowanie, 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>

Tylko ostatnie ostrzeżenie, możesz nie chcieć, aby przyciski wprowadzania, pola wyboru itp. Były uwzględnione w tym stylu, więc użyj, input:not([type='button'])aby nie stosować go do niektórych typów lub użyj input[type='text'], input[type='password']do określenia tych, do których chcesz zastosować.

Question 2

Dzieje się tak, ponieważ <input type="text" />element ma nieco inny domyślny styl niż <select>element, np. Wartości obramowania, dopełnienia i marginesów mogą być inne.

Możesz obserwować te domyślne style za pomocą inspektora elementów, takiego jak Firebug dla przeglądarki Firefox lub wbudowanego w Chrome. Co więcej, te domyślne arkusze stylów różnią się w zależności od przeglądarki.

Masz dwie możliwości:

Jawnie ustaw wartości obramowania, dopełnienia i marginesów tak, aby były takie same dla obu elementów
Arkusz stylów zresetowania CSS, który zostanie dołączony przed własnymi arkuszami stylów CSS

Wybrałbym opcję 1., ponieważ opcja 2. wymaga dużo pracy i skończysz z mnóstwem niepotrzebnych arkuszy CSS. Ale niektórzy twórcy stron internetowych wolą zaczynać od zera i mieć pełną kontrolę.

Question 3

To zbliży Cię do celu, ale taki poziom precyzji jest prawie niemożliwy.

<div style="width: 200px"><input type="text" style="width: 100%; margin: 0; padding: 0" /></div>
<div style="width: 200px">
    <select id="Select1" style="width: 100%; margin: 0; padding: 0">
        <option>1</option>
    </select>
</div>

Question 4

Różne przeglądarki domyślnie stosują różne style. Odkryłem, że zresetowanie zarówno marginesów, jak i dopełnienia do 0 sprawia, że oba elementy mają taką samą szerokość w Firefoksie i Chrome.

<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            input, select {
                margin: 0;
                padding: 0;
                width: 200px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br />
        <select>
            <option>123</option>
        </select>
    </body>
</html>

Osobiście lubię używać minimalnego arkusza stylów resetowania CSS, takiego jak Resetowanie CSS YUI, zanim spróbuję sprawić, by projekt wyglądał świetnie w wielu przeglądarkach.

Question 5

Dodaj klasę do obu znaczników select i input, o których mowa, np .:

<input class='custom-input'/>
<select class='custom-input'></select>

następnie zmodyfikuj poniższy CSS, aby dopasować go do swojego projektu:

.custom-input {
        width:140px;
        border:1px solid #ccc;
        margin:1px;
        padding:3px;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -ms-box-sizing:content-box;
        -moz-box-sizing:content-box;
        -webkit-box-sizing:content-box;
        box-sizing:content-box;
    }

obvs to jest poprawka do obsługi przeglądarek

Question 6

Jeśli korzystasz z tabel 4 wejść, możesz użyć następującego rozwiązania - również kompatybilnego z ie7:

<tr style="width:1px;"><td style="width:inherit;position:relative;">
    <select style="width:100%;"> 
    </select> 
</td></tr>
<tr><td>
    <input type="text" style="width:150px;"/>
</td></tr>

W ten sposób szerokość komórki tabeli zostanie ustalona na szerokość wejścia,

W ten sposób wybór zawsze przyjmowałby pozostałą szerokość i idealnie pasował do wejścia d.

Question 7

Spróbuj usunąć domyślne obramowania z obu elementów:

select, input {
 border:0;
}

Question 8

Tak, niezwykle frustrujące. Jednak nigdy nie miałem z tym problemów, dopóki nie umieściłem tagu „<! DOCTYPE html>” na górze mojej strony HTML. Moja strona internetowa renderowała się poprawnie na wszystkich platformach, które mogłem przetestować, dopóki nie umieściłem tego tagu na górze mojego dokumentu.

Chociaż jest to „prawdziwa specyfikacja”, wydaje się, że jest źródłem tych problemów z dopasowaniem. FWIW, używam elementów HTML5, wbudowanego CSS itp., Wszystko bez tego tagu do określenia HTML5. YMMV.