입력 유형 요소가 균등하게 정렬되도록 중앙에 배치되어야합니다. 어떻게 든 입력 유형을 똑같이 정렬했지만 이제는 왼쪽 정렬됩니다. 중앙 정렬이 필요합니다.
.container {
width: 500px;
clear: both;
}
.container input {
width: 100%;
clear: both;
}<div class="container">
<label>EMP ID </label><input type="text" id="empid"> <br><br>
<label>EMP NAME</label><input type="text" id="empname"> <br><br>
<label>EMAIL ID</label><input type="text" id ="emailid"> <br><br>
</div>
<input type="submit" class="appButton" value="INSERT" onclick="insert();"> <br><br>
라벨과 입력 주위에 래퍼 클래스를 추가 한 이유는 마크 업 구조를 작성하는 것이 중요하기 때문에 유연해야하기 때문입니다. 앞으로 해당 라벨과 입력 대신에 다른 구성 요소를 넣고 싶다면 간단히 입력 할 수 있습니다. 이 래퍼에서 더 의미 있고 잘 구성됩니다.
.container {
width: 100%;
clear: both;
}
.container input {
width: 200px;
clear: both;
}
.container label {
display: block;
}
.wrapper {
text-align: center;
margin: 0 auto;
margin-bottom: 10px;
}<div class="container">
<div class="wrapper">
<label>EMP ID</label>
<input type="text" id="empid">
</div>
<div class="wrapper">
<label>EMP NAME</label>
<input type="text" id="empname">
</div>
<div class="wrapper">
<label>EMAIL ID</label>
<input type="text" id="emailid">
</div>
<div class="wrapper">
<input type="submit" class="appButton" value="INSERT" onclick="insert();">
</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다