CSS에서 텍스트와 선택 상자를 같은 너비로 정렬 하시겠습니까?
좋아, 이것은 옳지 않은 것 같습니다. 텍스트 상자와 선택 상자가 있습니다. 왼쪽 여백과 오른쪽 여백에 정렬되도록 정확히 같은 너비를 원합니다.
<!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>
Just one final warning you may not want input buttons, checkboxes etc to be included in this styling so use the input:not([type='button']) to not apply it to certain types or use input[type='text'], input[type='password'] to specify ones you do want it to apply to.
This is because the <input type="text" /> element has a slightly different default style to the <select> element e.g. the border, padding and margin values may be different.
You can observe these default styles through an element inspector such as Firebug for Firefox or the built-in one for Chrome. Futhermore, these default stylesheets differ from browser to browser.
You have two options:
- Explicitly set the border, padding and margin values to be the same for both elements
- A CSS reset stylesheet to be included before your own CSS stylesheets
I would go with option 1. because option 2. requires a lot of work and you'll end up with tons of unnecessary CSS. But some web developers prefer to start from scratch and have complete control.
This will get you close, but that level of precision is nearly impossible.
<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>
Different browsers apply different styles by default. I found that resetting both margin and padding to 0 makes both elements equal widths in both Firefox and 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>
I personally like to use a minimal CSS reset stylesheet like YUI CSS Reset before attempting to make a design look great in multiple browsers.
Add a class to both the select and input tags in question ie:
<input class='custom-input'/>
<select class='custom-input'></select>
then modify the css below to fit your design:
.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 this is a fix for supporting browsers
If u use tables 4 inputs u could use the following solution - also compatable with 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>
That way the table cell width will be fixated to the width of the input,
And that way the select would therefore always take the remaining width and perfectly line up with d input.
Try removing the default borders from both elements:
select, input {
border:0;
}
Yes, extremely frustrating. However, I never had problems with that 'till I put a "<!DOCTYPE html>" tag at the top of my HTML page. My webpage rendered properly on all platforms that I could test until I put that tag at the top of my document.
While that's "genuine spec", it seems to be the source of these alignment problems. FWIW, I'm using HTML5 elements, in-line CSS, etc., all without that tag to specify HTML5. YMMV.
참고URL : https://stackoverflow.com/questions/10001291/aligning-text-and-select-boxes-to-the-same-width-in-css
'program tip' 카테고리의 다른 글
| Android AudioRecord가 다른 스트림을 MIC 오디오 소스로 강제 (0) | 2020.10.06 |
|---|---|
| SBT 및 IntelliJ IDEA로 여러 상호 의존적 모듈을 관리하는 방법은 무엇입니까? (0) | 2020.10.06 |
| 재귀 생성자 호출이 잘못된 C # 코드를 컴파일하는 이유는 무엇입니까? (0) | 2020.10.06 |
| 드로어 블 -hdpi, 드로어 블 -mdpi, 드로어 블 -ldpi Android (0) | 2020.10.06 |
| AlarmManager가 여러 장치에서 작동하지 않음 (0) | 2020.10.06 |