width : auto for <input> 필드

122

초보자 CSS 질문. 요소는 '사용 가능한 공간 채우기'를 의미 한다고 생각 width:auto했습니다 display:block. 그러나 <input>요소의 경우에는 그렇지 않은 것 같습니다. 예를 들면 :

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

두 가지 질문 :

width : auto가 정확히 무엇을 의미하는지에 대한 정의가 있습니까? CSS 사양이 모호해 보이지만 관련 섹션을 놓친 것 같습니다.
입력 필드에 대해 예상되는 동작을 달성하는 방법이 있습니까? 다른 블록 레벨 요소처럼 사용 가능한 공간을 채우시겠습니까?

감사!

css

— Richb
소스

display : block을 사용한 입력

— Phrogz 2011 년

@Phrogz 예, 중복입니다. 검색했지만 찾지 못했습니다. 고마워.

— richb 2011 년

88

<input>의 폭은 그것으로부터 생성되는 size속성. 기본값 size은 자동 너비를 구동하는 것입니다.

width:100%아래 예제에서 설명한대로 시도 할 수 있습니다.

너비를 채우지 않음 :

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

폭 채우기 :

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

더 작은 크기, 더 작은 너비 :

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

최신 정보

몇 분 후에 할 수있는 최선의 방법은 다음과 같습니다. FF, Chrome 및 Safari에서 1px 떨어져 있으며 IE에서는 완벽합니다. (문제는 # ^ & * IE가 다른 사람들과 다르게 테두리를 적용하기 때문에 일관성이 없다는 것입니다.)

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

— 벤
소스

24

감사. width : 100 %는 똑같은 것이 아닙니다. 여백이나 테두리가 있으면 부모 상자가 넘칠 것입니다.

— richb 2011 년

1

이를 명시 적으로 설정하여 원하는 방식으로 조정할 수 있습니다 (예 : border:2px inset #eee; margin:-2px. 그래도 직접 테스트하지는 않았지만 그 라인을 따라 뭔가.

— 벤

3

감사합니다 스티브. 다른 흥미로운 아이디어가있는 stackoverflow.com/questions/1030793/… 도 확인해야합니다 .

— richb

1

입력 필드에 CSS 통해 일관된 폭 에픽 용액 +1

— 스테판 뿌려

11

inputs box-sizing 속성을 border-box로 설정하여 테두리가 컨테이너와 겹치지 않도록 할 수 있습니다.

— 니콜라스

26

"width : auto가 정확히 무엇을 의미하는지에 대한 정의가 있습니까? CSS 사양이 모호해 보이지만 관련 섹션을 놓친 것 같습니다."

실제로 원본 포스터 질문의 위 부분에 답한 사람은 없습니다.

답은 다음과 같습니다. http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

width 값이 auto 인 한 요소는 컨테이너보다 넓어지지 않고 가로 여백, 패딩 및 테두리를 가질 수 있습니다.

반면에 width : 100 %를 지정하면 요소의 전체 너비는 컨테이너 블록의 100 %에 가로 여백, 패딩 및 테두리를 더한 값이됩니다 ... 이것은 원하는 것일 수 있지만 그렇지 않은 경우가 많습니다. .

차이를 시각화하기 위해 나는 예를 만들었습니다. http://www.456bereastreet.com/lab/width-auto/

— 응답
소스

4

좋은 대답 / 링크, "box-sizeing : border-box"로 세 번째 예제를 넣는 것이 좋습니다 ...

— halfbit

그 입력에 대한 아니에요 및 자동이 기본이기 때문에, 나는 그 유용 표시되지 않습니다

— Barbz_YHOOL

9

다른 답변에서 언급했듯이 width : auto는 입력의 크기 속성에 의해 생성되는 너비로 인해 작동하지 않으며 "auto"또는 이와 유사한 것으로 설정할 수 없습니다.

박스 모델과 잘 어울리도록하는 데 사용할 수있는 몇 가지 해결 방법이 있지만 내가 아는 한 환상적인 것은 없습니다.

먼저 백분율을 사용하여 필드에 패딩을 설정하여 너비가 100 %가되도록 할 수 있습니다. 예 :

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

시도 할 수있는 또 다른 방법은 왼쪽과 오른쪽이 0으로 설정된 절대 위치 지정을 사용하는 것입니다.이 마크 업 사용 :

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

그리고이 CSS :

fieldset {
  position: relative;
}

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

이 절대 위치는 입력의 패딩이나 여백에 관계없이 입력이 부모 필드 세트를 가로로 채우도록합니다. 그러나 이것의 큰 단점은 이제 필드 셋의 높이를 처리해야한다는 것입니다. 설정하지 않으면 0이됩니다. 입력 값이 모두 같은 높이이면 이것이 효과가있을 것입니다. 단순히 필드 셋의 높이를 입력의 높이가 무엇이든간에 설정하십시오.

이 외에도 JS 솔루션이 있지만 JS로 기본 스타일을 적용하는 것을 좋아하지 않습니다.

— 존 라쉬
소스

8

때문에 input's는 width그것의에 의해 제어되는 size속성 내가 어떻게이는 초기화input width 의 내용에 따라 :

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

— Fabricio
소스

1

이 #angular특정 답변은 OP의 질문에 대한 유효한 답변이 아니지만 (그리고 나는 찬성하지 않습니다),이 특정 아이디어를 찾기 위해이 주제에 왔습니다.

— nobug

5

정확히 원하는 것이 아닐 수도 있지만 해결 방법은 자동 너비 스타일을 래퍼 div에 적용한 다음 입력을 100 %로 설정하는 것입니다.

— Mwilcox
소스

0

내가 생각할 수있는 유일한 옵션은 width:100%. 입력 필드에도 패딩을 적용하려면 그 label주위 에 컨테이너를 배치하는 것보다 대신 해당 레이블로 서식을 이동하고 레이블에 패딩도 지정하십시오. 입력 필드는 고정되어 있습니다.

— Lajos Meszaros
소스

0

답변 1- "응답"은 이에 대한 좋은 답변 / 링크를 제공했습니다. 간단히 말해서 "자동"이 기본값이므로 요소 너비의 변경 사항을 제거하는 것과 같습니다.

답 2- width: 100%대신 사용하십시오. 상위 컨테이너 (이 경우 "양식")의 100 %를 채 웁니다.

— 아킬 굽타
소스

-4

절대적으로 놀라운 기능을 설명하는 절대적으로 놀라운 링크 :

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

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

요점:

컨테이너에 display: flex;.
flex-grow: 1;포함 된 각 요소에 설정 합니다.
확장해야하는 포함 된 요소 내에 요소가있는 경우 포함 된 요소와 해당 (포함 된 포함) 하위 요소에 대해 1 단계와 2 단계를 반복합니다.
다양한 요구에 따라 조정하고 조정하십시오 (링크 참조).

편집- 예 :

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

— 앤드류
소스

입력에 대한 자동 너비를 어떻게 돕습니까?

— 커널

@ 커널 단순. 예를 참조하십시오.

— Andrew

입력 너비는 항상 100 %이며 가능한 최소값은 아닙니다.

— 커널

2

입력은 여전히 내용과 같은 너비가 아닙니다.

— 커널

수락 된 내용과 다른 모든 사람의 내용을 읽으면 다른 일을합니다. 그러면 질문은 "모든 사람이 잘못하고있는 것을 올바르게하고 있는가?"입니다.

— 커널