입력 크기 대 너비
<input name="txtId" type="text" size="20" />
또는
<input name="txtId" type="text" style="width: 150px;" />
브라우저 간 최적 코드는 무엇입니까?
물론 그것은 요구 사항에 달려 있지만 사람들이 어떻게 결정하고 어떤 기준에 의존하는지 궁금합니다.
둘 다 사용할 수 있습니다. 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>아마 가장 좋은 방법은 설정 20 개 문자의 입력 크기 엠 단위 : 그래서에서 세트 스타일의 폭이며, 제안 style='width:20em':)
size 다른 브라우저와 가능한 글꼴 설정간에 일관성이 없습니다.
widthPX에서 스타일 세트는 적어도 일관성이 될 것입니다, 모듈로 상자 크기 조정 문제 . 글꼴을 기준으로 크기를 조정하려면 스타일을 'em'으로 설정하고 싶을 수도 있습니다 (다시 입력 입력 font패밀리와 크기를 명시 적으로 설정하지 않으면 일관성이 없습니다 ). 액체 레이아웃 형태. 어느 쪽이든, 스타일 시트는 아마도 인라인 style속성 보다 선호 될 것입니다 .
당신은 여전히 필요 size에 대해 <select multiple>적절하게 옵션을 일렬로 높이를 얻을 수 있습니다. 그러나 나는 그것을 사용하지 않을 것 <input>입니다.
나는 이것이 "전통적인 지혜"에 위배된다고 말하고 싶지만 일반적으로 크기를 사용하는 것을 선호합니다. 그 이유는 많은 사람들이 말하지 않는 이유입니다. 필드의 너비는 글꼴 크기에 따라 브라우저마다 다릅니다. 특히, 브라우저 설정에 관계없이 항상 지정된 문자 수를 표시 할 수있을만큼 커야합니다.
예를 들어, 날짜 필드가있는 경우 일반적으로 8 자 또는 10 자 (2 자리 월 및 일, 2 자리 또는 4 자리 연도, 구분 기호)를 표시 할 수있을 정도로 넓은 필드를 원합니다. size 속성을 설정하면 공간 낭비를 최소화하면서 전체 날짜를 볼 수 있습니다. 대부분의 숫자와 마찬가지로-예상되는 값의 범위를 알고 있으므로 size 속성을 적절한 자릿수와 해당되는 경우 소수점을 더한 값으로 설정합니다.
내가 알 수있는 한 CSS 속성은 이것을하지 않습니다. 예를 들어, 너비를 em으로 설정하면 너비가 아닌 높이를 기준으로하므로 알려진 문자 수를 표시하려는 경우 매우 정확하지 않습니다.
물론이 논리가 항상 적용되는 것은 아닙니다. 예를 들어 이름 입력 필드에는 여러 문자가 포함될 수 있습니다. 이 경우 CSS 너비 속성 (일반적으로 px)으로 넘어갑니다. 그러나, 나는 필드의 대부분은 내가 알려진 내용의 일종을 가지고 있는지 확인하고, 내가 있는지 확인 할 수있는 크기 속성을 지정하여 말을 대부분의 내용이,에 대부분의 경우, 클리핑없이 표시됩니다.
방금 테이블 너비를 작게하려고 시도한 요소에 관계없이 더 작게 만들 수없는 테이블과의 싸움을 마쳤습니다. 방화범을 사용하여 검색했지만 너비를 너무 높게 설정 한 요소를 찾을 수 없습니다.
마지막으로 입력 텍스트 요소 의 크기 속성 을 변경하려고 시도하여 수정했습니다. 어떤 이유로 size 속성 은 CSS 너비보다 우선합니다. jQuery를 사용하여 테이블에 행을 동적으로 추가하고 입력을 포함하는 행이었습니다. 따라서 appendTo () 함수를 사용하여 입력을 동적으로 추가하는 경우 size 속성 을 너비와 함께 설정하는 것이 좋습니다 .
HTML은 요소의 의미 적 의미를 제어합니다. CSS는 페이지의 레이아웃 / 스타일을 제어합니다. 레이아웃을 제어 할 때 CSS를 사용하십시오.
즉, size = ""를 사용하지 마십시오
너비 (두 번째 예)를 사용하면 일관성이 향상됩니다.
sizeHTML의 width속성과 CSS 의 속성은 모두 너비를 설정합니다 <input>. 너비를 각 문자의 너비에 가까운 것으로 설정하려면 다음 **ch**과 같이 단위를 사용하십시오 .
input {
width: 10ch;
}
스타일과 너비를 사용하여 텍스트 상자의 크기를 조정할 수 있습니다. 여기에 코드가 있습니다.
<!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>정렬을 사용하여 텍스트 상자를 가운데에 맞 춥니 다.
참고 URL : https://stackoverflow.com/questions/1480588/input-size-vs-width
'IT story' 카테고리의 다른 글
| unique_ptr과 shared_ptr의 차이점 (0) | 2020.04.25 |
|---|---|
| PHP를 사용하여 XML 파일을 동적으로 생성하는 방법은 무엇입니까? (0) | 2020.04.25 |
| 파이썬의 트위스트에 대한 깨끗하고 가벼운 대안? (0) | 2020.04.24 |
| Windows를위한 최고의 무료 C ++ 프로파일 러 란 무엇입니까? (0) | 2020.04.24 |
| RewriteBase는 .htaccess에서 어떻게 작동합니까 (0) | 2020.04.24 |