좋아, 이것은 옳은 일이 불가능 해 보입니다. 텍스트 상자와 선택 상자가 있습니다. 왼쪽 여백과 오른쪽 여백에 정렬되도록 정확히 같은 너비를 원합니다.
<!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>
그렇게 생각하면 되겠죠? 아니. 선택 상자는 Firefox에서 6px 더 짧습니다. 스크린 샷을 참조하십시오.
이제 코드를 편집하고 두 가지 스타일을 만들어 보겠습니다.
<style type="text/css">
input {
width: 200px;
}
select {
width: 206px;
}
</style>
작동합니다!
잠깐, Chrome에서 더 나은 테스트 ...
누군가가 모든 브라우저에서 이들을 정렬하는 방법을 말해 줄 수 있습니까? 너비 : 200px를 모두 할 수없는 이유는 무엇입니까? 모든 브라우저가 다르게 표시하는 이유는 무엇입니까? 또한 우리가 텍스트 상자와 선택 상자의 높이가 다른 이유는 무엇입니까? 어떻게 같은 높이로 만들까요? 높이와 선 높이를 시도했지만 아무 소용이 없습니다.
해결책:
좋아, 아래 답변에서 도움을 받아 해결책을 찾았습니다. 핵심은 box-sizing : border-box 속성을 사용 하여 테두리와 패딩 을 포함 하는 너비를 지정할 때 사용하는 것 입니다. 여기에서 훌륭한 설명을 참조 하십시오 . 그러면 브라우저는 그것을 채워 넣을 수 없습니다.
아래 코드는 상자의 높이를 같은 크기로 설정하고 상자 안의 텍스트를 들여 쓰기하여 정렬되도록했습니다. Chrome에는 정렬을 버리는 선택 상자에 사용하는 정말 이상한 테두리가 있으므로 테두리를 설정해야합니다. 이는 HTML5 사이트 (예 : IE9, Firefox, Chrome, Safari, Opera 등 지원)에서 작동합니다.
<!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>
마지막 경고는이 스타일링에 입력 버튼, 체크 박스 등이 포함되는 input:not([type='button'])것을 원하지 않을 수 있으므로를 사용하여 특정 유형에 적용하지 않거나 적용 할 유형 input[type='text'], input[type='password']을 지정 하는 데 사용하십시오.