다음을 기준으로 HTML 입력 필드 정렬 :
다음과 같은 HTML 양식이 있습니다.
<html>
Name:<input type="text"/></br>
Email Address:<input type="text"/></br>
Description of the input value:<input type="text"/></br>
</html>
이제 레이블은 모두 레이블의 텍스트 길이에 따라 다른 위치에서 시작됩니다.
모든 ":"및 텍스트 상자가 동일한 위치에서 시작되고 앞의 텍스트가 ":"까지 오른쪽 정렬 할 입력 필드를 정렬하는 방법이 있습니까?
이를 달성하는 데 도움이 될 수있는 권한있는 CSS를 좋습니다.
HTML :
<div>
<label>Name:</label><input type="text">
<label>Email Address:</label><input type = "text">
<label>Description of the input value:</label><input type="text">
</div>
CSS :
label{
display: inline-block;
float: left;
clear: left;
width: 250px;
text-align: right;
}
input {
display: inline-block;
float: left;
}
레이블을 사용할 수 있습니다 ( JsFiddle 참조 ).
CSS
label { display: inline-block; width: 210px; text-align: right; }
HTML
<html>
<label for="name">Name:</label><input id="name" type="text"><br />
<label for="email">Email Address:</label><input id="email" type="text"><br />
<label for="desc">Description of the input value:</label><input id="desc" type="text"><br />
</html>
또는 테이블 ( JsFiddle ) 에서 해당 레이블을 사용할 수 있습니다.
<html>
<table>
<tbody>
<tr><td><label for="name">Name:</label></td><td><input id="name" type="text"></td></tr>
<tr><td><label for="email">Email Address:</label></td><td><input id="email" type = "text"></td></tr>
<tr><td><label for="desc">Description of the input value:</label></td><td><input id="desc" type="text"></td></tr>
</tbody>
</table>
</html>
양식 요소에 너비를 설정하고 (예제에 있어야합니다!) 입력 요소를 부동 (및 지움)합니다. 또한 br 요소를 삭제하십시오.
제 경우에는 항상 이런 경우에는 태그에 넣습니다.
<p> name : < input type=text /> </p>
그런 다음 CSS를 다음과 같이 적용합니다.
p {
text-align:left;
}
p input {
float:right;
}
p 태그의 너비를 지정해야합니다. 입력 태그가 맨으로 부동하기 때문입니다.
이 CSS는 버튼에도 영향을 미칩니다. 이 태그에 대한 규칙을 재정의해야합니다.
이 접근 방식이 이전에 취해 졌다는 것을 사용하면 쉽게 레이아웃을 만들 수 있다고 생각하는 모범 사례는 아닐 수도 있습니다.
HTML
<table>
<tr><td>Name:</td><td><input type="text"/></td></tr>
<tr><td>Age:</td><td><input type="text"/></td></tr>
</table>
<!--You can add the fields as you want-->
CSS
td{
text-align:right;
}
display table-cell / row를 사용하면 너비없이 작업을 수행 할 수 있습니다.
html :
<html>
<div>
<div class="row"><label>Name:</label><input type="text"></div>
<div class="row"><label>Email Address:</label><input type = "text"></div>
<div class="row"><label>Description of the input value:</label><input type="text"></div>
</div>
</html>
CSS :
label{
display: table-cell;
text-align: right;
}
input {
display: table-cell;
}
div.row{
display:table-row;
}
방금 레이블에 너비를 지정 입력 유형이 자동으로 정렬되었습니다.
input[type="text"] {
width:100px;
height:30px;
border-radius:5px;
background-color: lightblue;
margin-left:2px;
position:relative;
}
label{
position:relative;
width:300px;
border:2px dotted black;
margin:20px;
padding:5px;
font-family:AR CENA;
font-size:20px;
}<label>First Name:</label><input type="text" name="fname"><br>
<label>Last Name:</label><input type="text" name="lname"><br>참조 URL : https://stackoverflow.com/questions/10868640/align-html-input-fields-by
'ProgramingTip' 카테고리의 다른 글
| 정수의 거듭 제곱 계산 (0) | 2021.01.10 |
|---|---|
| double 및 float 값을 sqlite에 삽입하는 방법은 무엇입니까? (0) | 2021.01.10 |
| PHPExcel 및 텍스트 배치 (0) | 2021.01.10 |
| Python 목록 추가 메소드가 새 목록을 반환하도록 허용 (0) | 2021.01.10 |
| JSON.stringify는 일반 Javascript 배열에서 작동하지 않습니다. (0) | 2021.01.10 |