입력 텍스트와 암호 필드가 왜 정렬되어 있지 않습니까?

첫 번째 : 다음 그림을 참조하십시오. 다음 필드는하지 않지만 입력 텍스트와 암호 필드가 왜 정렬되어 있지 않습니까?

enter image description here
보시다시피

, 빨간색 사각형은 두 개의 필드는 상위 필드의 시작에 약간의 공간이, 일치하지 않습니다.
참고 :이 문제는 모든 브라우저에서 발생합니다.

HTML

<body> <br /><br /><br /><br /><br /> <div id="loginForm"> <form action="login.php" method="post"> <label> Username: <input type="text" name="username" id="username" /></label><br /> <label> Password: <input type="password" name="password" id="password" /></label><br /><br /> <input type="submit" name="sbmtLogin" value="login" /> </form> </div> </body>

body {margin:0; padding:0;} div#loginForm {width:270px; max-width:270px; margin:0 auto; padding:10px; text-align:center; background-color:#8de3fd;} div#loginForm input {margin:3px; padding:5px; color:#5b5b5b; width:150px; border:1px solid #9a9a9a;} div#loginForm input[type=submit] {width:70px;}

어떻게 그 문제를 해결할 수 있습니다 CSS?

출처

2014-01-17 Lion King

자신의'div's에 필드를 넣을 수 없습니까? – admdrew

주제에서 벗어나지 만, 5 행
's을 정말 싫어합니다. 그건 학대 야! –

@ MrLister : 다른 제안을하십시오. –

이유는 입력 텍스트 및 암호 필드는 일치하지입니까?

이름 및 비밀번호 내가 그 문제를 해결할 수있는 방법 길이가 다른 단어

입니까?

는 고정 폭 글꼴
랩을 사용하면 display: inline-block; width: ??? 곳으로 설정된 요소의 단어 ??? 고정 값입니다.

그 요소는 레이블이 될 수 있습니다.

<label for="username"> Username:</label> <input type="text" name="username" id="username" /></label><br /> 
<label for="password"> Password:</label> <input type="password" name="password" id="password" /></label> 

label { 
    display: inline-block; 
    width: 7em; /* adjust to taste */ 
}

는 다른 시스템에 다른 글꼴을 얻을 것이다 명심하십시오, 그래서 당신은 두 번째 방법을 가지고가는 경우에 요소의 폭과 자신에게 약간의 여유를 제공합니다.

출처

2014-01-17 21:33:30 Quentin

"사용자 이름 :"보다 약간 넓은 "암호 :"

들이 정렬되지 않는 이유는 그.

당신은 테이블이나 정의 폭 된 div의 필드를 넣어 뭔가를하고 싶어.

출처

2014-01-17 21:32:59 ElGavilan

Username:의 텍스트의 길이가 Password:보다 길기 때문입니다.

당신은 라벨 태그를 닫을 필요하므로 텍스트가 레이블에 실제로 (설정 또한 라벨을 클릭하여 입력을 선택하게됩니다 속성)

<body> 
    <br /><br /><br /><br /><br /> 
    <div id="loginForm"> 
    <form action="login.php" method="post"> 
    <label for="username"> Username:</label> <input type="text" name="username" id="username" /></label><br /> 
    <label for="password"> Password:</label> <input type="password" name="password" id="password" /></label>   <br /><br /> 
    <input type="submit" name="sbmtLogin" value="login" /> 
    </form> 
    </div>  
</body>

그런 다음에 공통의 폭을 넣어 CSS가있는 레이블

div#loginForm form label { 
    display: inline-block; 
    width: 200px; // whatever looks best 
}

출처

2014-01-17 21:33:54 davnicwil

글꼴의 모든 문자가 모든 글꼴의 너비가 같은 것은 아닙니다. 귀하의 경우에는 사용자 이름, 따라서 정렬 문제 암호보다 약간 큽니다.

당신이 상자 고정

HTML에 레이블을 넣을 필요가있는 문제를 해결하려면 - 사업부의 각 입력 요소를 포장을

<body> 
<br /><br /><br /><br /><br /> 
<div id="loginForm"> 
<form action="login.php" method="post"> 
    <div><label>Username:</label><input type="text" name="username" id="username" /></div> 
    <div><label>Password:</label><input type="password" name="password" id="password" /></div> 
    <div><input type="submit" name="sbmtLogin" value="login" /></div> 
</form> 
</div> 
</body>

CSS - 라벨의 폭을 설정하고 인라인 디스플레이를 설정 -block

body {margin:0; padding:0;} 
    div#loginForm {width:270px; max-width:270px; margin:0 auto; padding:10px; text-align:center; background-color:#8de3fd;} 
    div#loginForm input {margin:3px; padding:5px; color:#5b5b5b; width:150px; border:1px solid #9a9a9a;} 
    div#loginForm input[type=submit] {width:70px;} 
    #loginForm label { width: 100px; display: inline-block; }

출처

2014-01-17 21:39:44 ZubaiR

입력 텍스트와 암호 필드가 왜 정렬되어 있지 않습니까?

답변

관련 문제