좋아, 이것은 옳은 일이 불가능 해 보입니다. 텍스트 상자와 선택 상자가 있습니다. 왼쪽 여백과 오른쪽 여백에 정렬되도록 정확히 같은 너비를 원합니다.
<!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']을 지정 하는 데 사용하십시오.
답변
이는 <input type="text" />요소의 기본 스타일 이 요소와 약간 다르기 때문입니다 ( <select>예 : 테두리, 패딩 및 여백 값이 다를 수 있음).
이러한 기본 스타일은 Firefox 용 Firebug 또는 Chrome 용 내장 기능과 같은 요소 검사기를 통해 관찰 할 수 있습니다. 또한 이러한 기본 스타일 시트는 브라우저마다 다릅니다.
두 가지 옵션이 있습니다.
- 두 요소에 대해 테두리, 패딩 및 여백 값을 명시 적으로 설정합니다.
- 자신의 CSS 스타일 시트 앞에 포함될 CSS 재설정 스타일 시트
옵션 2는 많은 작업이 필요하고 불필요한 CSS가 많이 발생하기 때문에 옵션 1을 사용합니다. 그러나 일부 웹 개발자는 처음부터 시작하여 완전한 제어를 선호합니다.
답변
이렇게하면 가까이 다가 갈 수 있지만 그 정도의 정밀도는 거의 불가능합니다.
<div style="width: 200px"><input type="text" style="width: 100%; margin: 0; padding: 0" /></div>
<div style="width: 200px">
<select id="Select1" style="width: 100%; margin: 0; padding: 0">
<option>1</option>
</select>
</div>
답변
기본적으로 브라우저마다 다른 스타일이 적용됩니다. 여백과 패딩을 모두 0으로 재설정하면 Firefox와 Chrome에서 두 요소의 너비가 동일 해집니다.
<html>
<head>
<title>Test</title>
<style type="text/css">
input, select {
margin: 0;
padding: 0;
width: 200px;
}
</style>
</head>
<body>
<input type="text" value="ABC"><br />
<select>
<option>123</option>
</select>
</body>
</html>
개인적 으로 여러 브라우저에서 디자인을 멋지게 보이게하기 전에 YUI CSS Reset 과 같은 최소 CSS 재설정 스타일 시트를 사용하고 싶습니다 .
답변
문제의 선택 및 입력 태그 모두에 클래스를 추가합니다.
<input class='custom-input'/>
<select class='custom-input'></select>
그런 다음 디자인에 맞게 아래 CSS를 수정하십시오.
.custom-input {
width:140px;
border:1px solid #ccc;
margin:1px;
padding:3px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
}
obvs 이것은 브라우저 지원을위한 수정입니다.
답변
표 4 입력을 사용하는 경우 u는 다음 솔루션을 사용할 수 있습니다-또한 ie7과 호환됩니다.
<tr style="width:1px;"><td style="width:inherit;position:relative;">
<select style="width:100%;">
</select>
</td></tr>
<tr><td>
<input type="text" style="width:150px;"/>
</td></tr>
이렇게하면 테이블 셀 너비가 입력 너비에 고정됩니다.
따라서 선택은 항상 나머지 너비를 취하고 d 입력과 완벽하게 정렬됩니다.
답변
두 요소에서 기본 테두리를 제거해보십시오.
select, input {
border:0;
}
답변
예, 매우 실망 스럽습니다. 그러나 HTML 페이지 상단에 “<! DOCTYPE html>”태그를 삽입하기 전까지는 문제가 없었습니다. 내 웹 페이지는 문서 상단에 태그를 추가 할 때까지 테스트 할 수있는 모든 플랫폼에서 제대로 렌더링되었습니다.
이것이 “정품 사양”이지만 이러한 정렬 문제의 원인 인 것 같습니다. FWIW, 저는 HTML5를 지정하는 태그없이 HTML5 요소, 인라인 CSS 등을 모두 사용하고 있습니다. YMMV.
