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.

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

Answer 2

3

Jeśli musisz mieć taki poziom precyzji, nie będziesz zadowolony jako projektant stron internetowych.

Scott Saunders,

Answer 3

2

Tak, CSS codziennie doprowadza mnie do szaleństwa @Scott. :)

zuallauz

Answer 4

2

Uwaga, rozmiar pudełka nie jest obsługiwany w lte IE7 (około 3% użytkowników). I nigdy nie używaj: nie - nie jest obsługiwane w lte IE8, co jest 20% użytkowników :)

Anonimowy

Answer 5

Box-zaklejania robi prace nad IE8! Przez te wszystkie lata

dodawałem

Answer 6

rozmiar pudełka działa

Pierre

Answer 7

7

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

Chris Cannon
źródło

2

Resetowanie CSS nie jest złym pomysłem w takim przypadku.

Remy

1

Lekkie resetowania CSS istnieją, ale oczywiście mogą wystąpić niepożądane skutki uboczne. Jeśli zaczniesz projektować z arkuszem stylów resetowania CSS, ta opcja stanie się o wiele bardziej atrakcyjna.

Thomas Upton

Próbowałem ustawić jawne, padding:0; margin:0; border:1px solid #000;które ładnie wyrównuje szerokość tekstów / pól wyboru. Jeśli jednak spojrzysz na tekst wewnątrz dwóch pól, zauważysz, że tekst w polu zaznaczania jest bardziej dopełniony. Prawie trzeba dodać inny określony input { padding-left: 5px; }styl po pierwszym, aby naprawić. Jakieś pomysły? Użyłem resetowania CSS w witrynie, którą tworzyłem, przed utworzeniem tego podstawowego kodu testowego, ale problem nadal tam występował. Zresetowanie CSS najwyraźniej nie naprawiło tego konkretnego problemu z tekstem / szerokością pola wyboru.

zuallauz

1

Wypróbuj input {text-indent: 5px;}PS <select>tag jest bardzo sztywny i specyficzny dla systemu operacyjnego - zignoruje wiele CSS.

Chris Cannon

Tak, wcięcie tekstu działa, jeśli dodasz ten dodatkowy styl ... ale tylko dla jednej przeglądarki. Następnie w Chrome jest wcięty o inną wartość, więc zmniejsz o 2-3 piksele więcej! Może trzeba jakoś zresetować wcięcia dla zaznaczenia i tekstu?

zuallauz

Answer 8

2

Resetowanie CSS nie jest złym pomysłem w takim przypadku.

Remy

Answer 9

1

Lekkie resetowania CSS istnieją, ale oczywiście mogą wystąpić niepożądane skutki uboczne. Jeśli zaczniesz projektować z arkuszem stylów resetowania CSS, ta opcja stanie się o wiele bardziej atrakcyjna.

Thomas Upton

Answer 10

Próbowałem ustawić jawne, padding:0; margin:0; border:1px solid #000;które ładnie wyrównuje szerokość tekstów / pól wyboru. Jeśli jednak spojrzysz na tekst wewnątrz dwóch pól, zauważysz, że tekst w polu zaznaczania jest bardziej dopełniony. Prawie trzeba dodać inny określony input { padding-left: 5px; }styl po pierwszym, aby naprawić. Jakieś pomysły? Użyłem resetowania CSS w witrynie, którą tworzyłem, przed utworzeniem tego podstawowego kodu testowego, ale problem nadal tam występował. Zresetowanie CSS najwyraźniej nie naprawiło tego konkretnego problemu z tekstem / szerokością pola wyboru.

zuallauz

Answer 11

1

Wypróbuj input {text-indent: 5px;}PS <select>tag jest bardzo sztywny i specyficzny dla systemu operacyjnego - zignoruje wiele CSS.

Chris Cannon

Answer 12

Tak, wcięcie tekstu działa, jeśli dodasz ten dodatkowy styl ... ale tylko dla jednej przeglądarki. Następnie w Chrome jest wcięty o inną wartość, więc zmniejsz o 2-3 piksele więcej! Może trzeba jakoś zresetować wcięcia dla zaznaczenia i tekstu?

zuallauz

Answer 13

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>

Answer 14

3

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.

Thomas Upton
źródło

2

Jednak w IE zaznaczenie jest nadal o kilka pikseli krótsze. Więc chociaż nie ma idealnego rozwiązania, możemy

podejść

1

Ach, IE. Wygląda na to, że cieszy się wyjątkowością. Nie mam żadnej wersji IE do przetestowania, ale czy różni się ona nawet w późniejszych wersjach, takich jak 9 czy 10?

Thomas Upton

1

Testowałem z IE9 i nadal miał 2px różnicę w szerokości.

saluce

Jeśli spojrzysz na tekst wewnątrz dwóch ramek, zauważysz, że tekst w polu zaznaczania jest bardziej wypełniony. Prawie trzeba dodać konkretny input { padding-left: 5px; }. Czy to właściwy sposób? Użyłem resetowania CSS w witrynie, którą tworzyłem, przed utworzeniem tego podstawowego kodu testowego, ale problem nadal tam występował. Reset CSS nie naprawił tego konkretnego problemu z szerokością pola tekstowego / zaznaczania.

zuallauz

1

Dopełnienie wejścia z lewej strony to sposób, w jaki spróbowałbym wyrównać tekst w tych dwóch elementach, gdyby taki był wymóg. Nie zapominaj, że te elementy wyglądają inaczej w różnych systemach operacyjnych. Nie jestem pewien, czy próba wyrównywania tekstu elementów inputi selectjest warta zachodu, biorąc wszystko pod uwagę. Dopasowanie zewnętrznych krawędzi tych elementów wygląda całkiem nieźle, estetycznie.

Thomas Upton

Answer 15

2

Jednak w IE zaznaczenie jest nadal o kilka pikseli krótsze. Więc chociaż nie ma idealnego rozwiązania, możemy

podejść

Answer 16

1

Ach, IE. Wygląda na to, że cieszy się wyjątkowością. Nie mam żadnej wersji IE do przetestowania, ale czy różni się ona nawet w późniejszych wersjach, takich jak 9 czy 10?

Thomas Upton

Answer 17

1

Testowałem z IE9 i nadal miał 2px różnicę w szerokości.

saluce

Answer 18

Jeśli spojrzysz na tekst wewnątrz dwóch ramek, zauważysz, że tekst w polu zaznaczania jest bardziej wypełniony. Prawie trzeba dodać konkretny input { padding-left: 5px; }. Czy to właściwy sposób? Użyłem resetowania CSS w witrynie, którą tworzyłem, przed utworzeniem tego podstawowego kodu testowego, ale problem nadal tam występował. Reset CSS nie naprawił tego konkretnego problemu z szerokością pola tekstowego / zaznaczania.

zuallauz

Answer 19

1

Dopełnienie wejścia z lewej strony to sposób, w jaki spróbowałbym wyrównać tekst w tych dwóch elementach, gdyby taki był wymóg. Nie zapominaj, że te elementy wyglądają inaczej w różnych systemach operacyjnych. Nie jestem pewien, czy próba wyrównywania tekstu elementów inputi selectjest warta zachodu, biorąc wszystko pod uwagę. Dopasowanie zewnętrznych krawędzi tych elementów wygląda całkiem nieźle, estetycznie.

Thomas Upton

Answer 20

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

Answer 21

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.

Answer 22

To dużo dodatkowego kodu HTML. To jest problem CSS z rozwiązaniem CSS.

GlennG

Answer 23

0

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

select, input {
 border:0;
}

dotNET Lady
źródło

Answer 24

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.

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

Rozwiązanie:

Odpowiedzi: