입력 크기 대 너비

231 
<input name="txtId" type="text" size="20" />

또는

<input name="txtId" type="text" style="width: 150px;" />

최적의 브라우저 간 코드는 어느 것입니까?

물론 그것은 요구 사항에 달려 있지만 사람들이 어떻게 결정하고 어떤 기준에 의존하는지 궁금합니다.

html  css 
— 라자 크크
소스
17
일반적으로 웹에서 "px"를 사용하는 것은 좋지 않습니다. 대신 상대 단위 ( "em", "%"등)를 사용하는 것이 좋습니다.
— kangax
37
@kangax 그것은 단지 한 의견이다; px 사용에 관한 합의가 없습니다
— Kos
7
@Kos 그것은 일종의 합의였습니다. 더 이상 (IE와 다른 오래된 브라우저에서는) 사라지지 않습니다.
— kangax
9
@ kangax 나는 그 메모를 얻지 못했습니다 ... 나는 항상 px를 사용하고 항상 가지고 있습니다.
— Andrew

답변:

180

둘 다 사용할 수 있습니다. CSS 스타일은 sizeCSS를 지원하는 브라우저 의 속성을 무시하고 필드를 올바른 너비로 만들고 그렇지 않은 경우 지정된 문자 수로 대체 됩니다.

편집 : 제가 언급해야 size: 속성이 크기의 정확한 방법이 아닙니다 은 HTML 사양에 따라 , 그것은 해야 입력이 한 번에 표시 할 수있을 것입니다 현재 글꼴의 문자 수를 참조하십시오.

그러나 지정된 글꼴이 고정 너비 / 단일 글꼴이 아닌 경우 지정된 문자 수가 실제로 표시되는 것은 아닙니다 . 대부분의 글꼴에서 다른 문자는 너비가 다릅니다. 이 질문 에는이 문제와 관련하여 좋은 답변이 있습니다.

아래 스 니펫은 두 가지 접근 방식을 모두 보여줍니다.

@font-face {
    font-family: 'Diplomata';
    font-style: normal;
    font-weight: 400;
    src: local('Diplomata'), local('Diplomata-Regular'), url(https://fonts.gstatic.com/s/diplomata/v8/8UgOK_RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
    font-family: 'Open Sans Condensed';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v11/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
p {
  margin: 0 0 10px 0;
}
input {
  font-size: 20px;
}
.narrow-font {
  font-family: 'Open Sans Condensed', sans-serif;
}
.wide-font {
  font-family: 'Diplomata', cursive;
}
.set-width {
  width: 220px;
}
<p>
  <input type="text" size="10" class="narrow-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="narrow-font set-width" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font set-width" value="0123456789" />
</p>
스 니펫 확장

— 마크 벨
소스
2
@Mark B. 답변 해 주셔서 감사합니다. 여기에 질문을하기 위해 인라인 스타일을 사용했습니다.
— rajakvk 2018 년
걱정할 필요가 없습니다. 당신이 있을지도 모른다는 생각이 들었습니다.
— Mark Bell
대부분의 글꼴은 단일 너비가 아닙니다. "필드에 한 번에 표시 할 수있는 문자 수"와 관련하여 .... 어떤 문자를 의미합니까?
— Pacerier
@Pacerier 입력에 사용 된 글꼴 수 : jsbin.com/zimako/1
— Mark Bell
1
@jbyrd 그렇습니다. 그러나 HTML 사양에 따라 정답입니다. 나는 상황을 조금 명확히하기 위해 지금 답변을 편집했습니다.
— Mark Bell
49

아마도 가장 좋은 방법은 em 단위로 스타일의 너비를 설정하는 것입니다. :) 20 자의 입력 크기의 경우 style='width:20em':)

— 사상가
소스
4
그러나 흥미로운 점은 내 테스트에서 width : 20em은 20 자보다 훨씬 큰 입력을 만듭니다.
— Christophe
32
"em"은 'M'문자의 높이를 측정 한 것이므로 상자가 너무 커집니다.
— humbads
9
CSS에서 em은 직접 또는 가장 가까운 부모의 글꼴 크기와 관련이 있습니다. 예를 들어, 요소의 상속 된 font-size가 16px이고 font-size를 2em으로 설정하면 결과 크기는 32px (16px * 2em)가됩니다. "em"단위는 문자 수량이 아닙니다. 더 : w3.org/TR/css3-values/#font-relative-lengths 및 kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs 및 j.eremy.net/confused
— -about
1
@humbads 당신은 'M'문자 의 너비 의 측정을 의미하지 않습니까?
— Jess
5
@Jess, 좋은 질문입니다. 에서 인쇄술 , '그들'은 'M'문자의 폭을 의미하는 데 사용됩니다. 오랫동안 같은 것을 믿었습니다. 그러나 CSS 및 디지털 타이포그래피에서 'em'은 글꼴 높이 (포인트)와 같습니다. 'M'문자가 없거나 'M'이 글꼴의 전체 높이 또는 너비가 아닌 문자 세트를 수용합니다.
— humbads
21

size 다른 브라우저와 가능한 글꼴 설정에서 일치하지 않습니다.

widthPX에서 스타일 세트는 적어도 일관성이 될 것입니다, 모듈로 상자 크기 조정 문제 . 글꼴을 기준으로 크기를 조정하려면 스타일을 'em'으로 설정하고 싶을 수도 있습니다 (다시 입력 입력 font패밀리와 크기를 명시 적으로 설정하지 않으면 일관성이 없습니다 ). 액체 레이아웃 형태. 어느 쪽이든, 스타일 시트는 아마도 인라인 style속성 보다 선호 될 것입니다 .

당신은 여전히 필요 size에 대해 <select multiple>적절하게 옵션을 일렬로 높이를 얻을 수 있습니다. 그러나 나는 그것을 사용하지 않을 것 <input>입니다.

— 보 빈스
소스
13

나는 이것이 "전통적인 지혜"에 위배된다고 말하고 싶지만 일반적으로 크기를 사용하는 것을 선호합니다. 그 이유는 많은 사람들이 말하지 않는 이유입니다. 필드의 너비는 글꼴 크기에 따라 브라우저마다 다릅니다. 특히, 브라우저 설정에 관계없이 항상 지정된 문자 수를 표시 할 수있을만큼 커야합니다.

예를 들어, 날짜 필드가있는 경우 일반적으로 8 자 또는 10 자 (2 자리 월 및 일, 2 자리 또는 4 자리 연도, 구분 기호)를 표시 할 수있을 정도로 넓은 필드를 원합니다. size 속성을 설정하면 공간 낭비를 최소화하면서 전체 날짜를 볼 수 있습니다. 대부분의 숫자와 마찬가지로-예상되는 값의 범위를 알고 있으므로 size 속성을 적절한 자릿수와 해당되는 경우 소수점을 더한 값으로 설정합니다.

내가 알 수있는 한 CSS 속성은 이것을하지 않습니다. 예를 들어, 너비를 em으로 설정하면 너비가 아닌 높이를 기준으로하므로 알려진 문자 수를 표시하려는 경우 매우 정확하지 않습니다.

물론이 논리가 항상 적용되는 것은 아닙니다. 예를 들어 이름 입력 필드는 여러 문자를 포함 할 수 있습니다. 이 경우 CSS 너비 속성 (일반적으로 px)으로 넘어갑니다. 그러나, 나는 필드의 대부분은 내가 알려진 내용의 일종을 가지고 있는지 확인하고, 내가 있는지 확인 할 수있는 크기 속성을 지정하여 말을 대부분의 내용이,에 대부분의 경우, 클리핑없이 표시됩니다.

— 이브 루스터
소스
exsize를 사용하면 너비에 CSS에 수십 개의 id / class가 없어도 대부분의 경우가 단순화되지만 단위를 사용할 수도 있습니다 .
— Forty
@Forty 사실, 당신은 할 수 없습니다. 너비가 아닌 문자 ex의 높이 (특히 "X") em입니다. 문자의 높이와 너비 (x 또는 기타) 사이에는 고정 된 관계가 없기 때문에 문자의 높이를 사용하여 필드 너비를 설정하면 필드를 적절한 너비로 표시 할 수 있다고 믿을 이유가 없습니다. 주어진 문자 수. 글꼴에 따라 더 넓거나 좁을 수 있습니다. 이제 ch장치가 유망 해 보이지만 IE에서 9 미만의 지원되지 않으므로이 글을 쓸 때 문제가되었습니다.
— ibrewster
예, 그러나 x의 높이는 일반적으로 너비보다 작지 않습니다. 대부분의 시간은 실제로 약간 높거나 거의 같으므로 아주 가까워집니다. ch불행히도 더 나아질 수 있었지만, 일부 0은 얇고 전체 문자 공간을 측정하지 못할 수 있습니다 ...
— Forty
@Forty True, 따라서 입력 필드의 너비를 특정 문자 수로 설정하는 데 좋은 CSS 속성이 없다는 원래의 요점을 강화하면서 size속성은 정확히 그렇게하려고 노력합니다. 당신은 ex타당한 대안이 맞을지도 모르지만 사실은 그것이 너비 속성이 아니라 높이 속성이라는 사실로 남아 있습니다. sizeCSS가 아닌 너비 속성입니다.
— ibrewster
사용하기에 충분히
— Forty
4

방금 테이블 너비를 작게하려고 시도한 요소에 관계없이 더 작게 만들 수없는 테이블과의 싸움을 마쳤습니다. 방화범을 사용하여 검색했지만 너비를 너무 높게 설정 한 요소를 찾을 수 없습니다.

마지막으로 입력 텍스트 요소 의 크기 속성 을 변경하려고 시도하여 수정했습니다. 어떤 이유로 size 속성 은 CSS 너비보다 우선합니다. jQuery를 사용하여 테이블에 행을 동적으로 추가하고 입력을 포함하는 행이었습니다. 따라서 appendTo () 함수를 사용하여 입력을 동적으로 추가하는 경우 size 속성 을 너비와 함께 설정하는 것이 좋습니다 .

— 표
소스
1

너비 (두 번째 예)를 사용하면 일관성이 향상됩니다.

— 맷 하웰
소스
1

스타일과 너비를 사용하여 크기를 조정하여 텍스트 상자의 크기를 조정할 수 있습니다. 여기에 코드가 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body>
<div align="center">

    <form method="post">
          <div class="w3-row w3-section">
            <div class="w3-rest" align = "center">
                <input name="lastName" type="text" id="myInput" style="width: 50%">
            </div>
        </div>
    </form>
</div>
</body>
</html>
스 니펫 확장

정렬을 사용하여 텍스트 상자를 가운데에 맞 춥니 다.

— 샤
소스
1

sizeHTML의 width속성과 CSS 의 속성은 모두 너비를 설정합니다 <input>. 너비를 각 문자의 너비에 가까운 것으로 설정하려면 다음 **ch**과 같이 단위를 사용하십시오 .

input {
    width: 10ch;
}
— chrisbowman22
소스
0

HTML은 요소의 의미 적 의미를 제어합니다. CSS는 페이지의 레이아웃 / 스타일을 제어합니다. 레이아웃을 제어 할 때 CSS를 사용하십시오.

즉, size = ""를 사용하지 마십시오

— 크리스 소볼 로프 스키
소스
크기는 요소의 의미에 내재 될 수 있습니다. 예를 들어 중간 이니셜에는 단일 문자가 있습니다. 이름 OTOH는 데이터베이스에 크기가 없으면 기본적으로 크기 제한이 없습니다.
— derobert
4
@derobert : 나는 잘못 생각할 수 있지만 일반적으로 size-attribute가 아닌 input [type = text | password]에 maxlength-attribute를 사용한다고 표현합니다.
— Horst Gutmann
2
@ Horst : 글쎄, 나는 중간 초기 값을 둘 다로 표현하고 (그 한계는 사용자에게 합리적이므로) 데이터베이스는 maxlength로만 제한합니다.
— derobert
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.