szerokość: auto dla pól <input>

123

Pytanie dla początkujących CSS. Myślałem, że width:autodla display:blockelementu oznaczało „wypełnienia dostępnej przestrzeni”. Jednak w przypadku <input>elementu wydaje się, że tak nie jest. Na przykład:

<body>
<form style='background-color:red'>
<input type='text' style='background-color:green;display:block;width:auto'>
</form>
</body>

Zatem dwa pytania:

Czy istnieje definicja tego, co dokładnie oznacza szerokość: auto? Specyfikacja CSS wydaje mi się niejasna, ale być może przegapiłem odpowiednią sekcję.
Czy istnieje sposób na osiągnięcie mojego oczekiwanego zachowania dla pola wejściowego - tj. wypełnić dostępną przestrzeń, tak jak robią to inne elementy blokowe?

Dzięki!

css

— Richb
źródło

możliwy duplikat wejścia z wyświetlaczem: blok nie jest blokiem, dlaczego nie?

— Phrogz,

@Phrogz Tak, to jest duplikat. Szukałem, ale nie znalazłem. Dzięki.

— richb,

88

An <input>„s szerokość jest generowany z jego sizeatrybutem. Wartość domyślna sizesteruje automatyczną szerokością.

Możesz spróbować, width:100%jak pokazano na moim przykładzie poniżej.

Nie wypełnia szerokości:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:auto' />
</form>

Szerokość wypełnień:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:100%' />
</form>

Mniejszy rozmiar, mniejsza szerokość:

<form action='' method='post' style='width:200px;background:khaki'>
  <input size='5' />
</form>

AKTUALIZACJA

Oto najlepsze, co mogłem zrobić po kilku minutach. W FF, Chrome i Safari jest o 1 piksel mniej, a w IE - idealnie. (Problem polega na tym, że # ^ & * IE stosuje obramowania inaczej niż wszyscy inni, więc nie jest to spójne).

<div style='padding:30px;width:200px;background:red'>
  <form action='' method='post' style='width:200px;background:blue;padding:3px'>
    <input size='' style='width:100%;margin:-3px;border:2px inset #eee' />
    <br /><br />
    <input size='' style='width:100%' />
  </form>
</div>

— Ben
źródło

24

Dzięki. szerokość: 100% to nie to samo. Spowoduje to przepełnienie pola nadrzędnego, jeśli są marginesy lub obramowanie.

— richb,

1

Możesz jawnie ustawić je, aby dostosować, jak chcesz, np border:2px inset #eee; margin:-2px. Sam tego nie testowałem, ale coś w tym stylu.

— Ben,

3

Dzięki Steve. Powinieneś także sprawdzić stackoverflow.com/questions/1030793/…, który ma kilka innych interesujących pomysłów.

— richb,

1

Epickie rozwiązanie dla stałych szerokości poprzez css na polach wejściowych, +1

— Stephen Sprinkle,

11

możesz użyć ustawienia właściwości input box-size na border-box, aby ramka nie zachodziła na kontener.

— Nicholas

26

„Czy istnieje definicja tego, co dokładnie oznacza width: auto? Specyfikacja CSS wydaje mi się niejasna, ale może przegapiłem odpowiednią sekcję”.

Nikt tak naprawdę nie odpowiedział na powyższą część pytania pierwotnego autora.

Oto odpowiedź: http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

Dopóki wartość szerokości to auto, element może mieć poziomy margines, dopełnienie i obramowanie, nie rozszerzając się jednak niż jego kontener ...

Z drugiej strony, jeśli określisz szerokość: 100%, całkowita szerokość elementu będzie wynosić 100% zawierającego go bloku plus margines poziomy, dopełnienie i obramowanie ... To może być to, czego chcesz, ale najprawdopodobniej tak nie jest .

Aby zwizualizować różnicę, zrobiłem przykład: http://www.456bereastreet.com/lab/width-auto/

— odpowiedź
źródło

4

fajna odpowiedź / link, proponuję umieścić trzeci przykład z "box-sizeing: border-box" ...

— halfbit

to nie jest dla danych wejściowych, a ponieważ domyślnie jest auto, nie widzę, jak to jest przydatne

— Barbz_YHOOL

9

Jak stwierdzono w drugiej odpowiedzi, width: auto nie działa, ponieważ szerokość jest generowana przez atrybut rozmiaru danych wejściowych, którego nie można ustawić na „auto” ani nic podobnego.

Istnieje kilka obejść, których można użyć, aby sprawić, że będzie ładnie współpracował z modelem pudełkowym, ale o ile wiem, nie ma nic fantastycznego.

Najpierw możesz ustawić wypełnienie w polu za pomocą procentów, upewniając się, że szerokość sumuje się do 100%, np:

input {
  width: 98%;
  padding: 1%;
}

Inną rzeczą, którą możesz spróbować, jest użycie pozycjonowania bezwzględnego, z lewym i prawym ustawieniem na 0. Używając tego znacznika:

<fieldset>
    <input type="text" />
</fieldset>

A ten CSS:

fieldset {
  position: relative;
}

input {
    position: absolute;
    left: 0;
    right: 0;
}

To bezwzględne pozycjonowanie spowoduje, że dane wejściowe wypełnią nadrzędny zestaw pól poziomo, niezależnie od wypełnienia lub marginesu danych wejściowych. Jednak ogromną wadą jest to, że teraz musisz poradzić sobie z wysokością zestawu pól, która będzie wynosić 0, chyba że ją ustawisz. Jeśli wszystkie dane wejściowe mają tę samą wysokość, to zadziała, po prostu ustaw wysokość zestawu pól na dowolną wysokość wejścia.

Poza tym jest kilka rozwiązań JS, ale nie lubię stosować podstawowych stylów w JS.

— Jon Raasch
źródło

8

Bo input„s widthjest kontrolowany przez swojego sizeatrybutu, to w jaki sposób zainicjowaćinput width zgodnie z jego treścią:

<input type="text" class="form-list-item-name" [size]="myInput.value.length" #myInput>

— Fabricio
źródło

1

Chociaż ta #angularkonkretna odpowiedź nie jest poprawną odpowiedzią na pytanie PO (i nie głosuję za), przyszedłem do tego tematu tylko po to, aby znaleźć ten konkretny pomysł.

— nobug

5

Może to nie być dokładnie to, czego chcesz, ale moim obejściem jest zastosowanie stylu autowidth do opakowującego elementu div, a następnie ustawienie wartości wejściowej na 100%.

— mwilcox
źródło

0

Jedyną opcją, o której przychodzi mi do głowy, jest użycie width:100%. Jeśli chcesz mieć wypełnienie również w polu wejściowym, zamiast po prostu umieścić labelwokół niego kontener , przenieś formatowanie do tej etykiety, jednocześnie określając wypełnienie do etykiety. Pola wejściowe są sztywne.

— Lajos Meszaros
źródło

0

Odpowiedź 1 - „odpowiedź” dała ładną odpowiedź / link. Krótko mówiąc, domyślnym ustawieniem jest „auto”, więc przypomina to usuwanie wszelkich zmian szerokości elementu

Odpowiedź 2 - użyj width: 100%zamiast tego. Wypełni on 100% kontenera nadrzędnego, w tym przypadku „formularza”.

— Akhil Gupta
źródło

-4

Absolutnie niesamowite linki opisujące absolutnie niesamowitą funkcję:

https://css-tricks.com/snippets/css/a-guide-to-flexbox

https://www.htmllion.com/css-flexbox.html

Istota:

Umieść elementy w pojemniku z display: flex;.
Ustaw flex-grow: 1;na każdym z zawartych elementów.
Jeśli masz elementy w tych zawartych elementach, które również muszą rosnąć, powtórz kroki 1 i 2 dla zawartych elementów i ich (zawartych) elementów podrzędnych.
Dostosuj i dostosuj do różnych potrzeb (patrz linki).

Edycja - przykład :

<body style="display: flex;">
  <div style="display: flex; flex-grow: 1;">
    <input type="text" style="flex-grow: 1;" />
  </div>
</body>

— Andrzej
źródło

Jak to pomaga w automatycznej szerokości danych wejściowych?

— kernel

@kernel Simple. Zobacz przykład.

— Andrew

Szerokość wejścia zawsze wynosi 100%, a nie minimalna możliwa.

— kernel

2

Dane wejściowe nadal nie mają takiej samej szerokości jak zawartość, o co pytano.

— kernel

Jeśli przeczytasz zaakceptowaną - a także wszystkich innych - odpowiedź, to robi coś innego. Pytanie brzmiałoby wtedy „co robisz dobrze, że wszyscy robią źle?”.

— kernel