display : inline-block 및 ems를 사용하여 submit 버튼과 일치하는 양식 요소 얻기

응답 형 양식 설계를 진행 중입니다. 위 아래 코드는 아래에 있습니다. SEND 버튼이 다른 입력 필드와 제대로 정렬되지 않는 이유는 무엇입니까?display : inline-block 및 ems를 사용하여 submit 버튼과 일치하는 양식 요소 얻기

margin-left:5em을 사용하고 있습니다.이 양식 레이블은 양식 레이블에도 width이 5em이지만 항목 번호가 없으므로 다른 입력 필드와 일렬로 있어야합니다. 대신 버튼은 왼쪽으로 오프셋됩니다. 내가 뭘 놓치고 있니? 감사합니다. . 이 일할 수있는 당신의 입력 요소에 스타일 아래

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Test page</title> 
<style> 
     label, input, textarea {display: inline-block; vertical-align: top;} 
     label {width: 5em; text-align: right;} 
     input, textarea {width: 20em;} 
     input[type="submit"] {margin-left: 5em; width: 6em;}  
     * { 
      -moz-box-sizing: border-box; 
      -webkit-box-sizing: border-box; 
      box-sizing: border-box; 
      padding: 0; 
      margin: 0; 
     } 
</style> 
</head>  
<body> 
<form action="#" method="post"> 
    <div> 
     <label for="form1_name">Name:</label> 
     <input id="form1_name" name="name" type="text" placeholder="first and last name" required="required" /> 
    </div> 

    <div> 
     <label for="form1_email">Email:</label> 
     <input id="form1_email" name="email" type="email" placeholder="your email address" required="required" /> 
    </div> 

    <div> 
     <label for="form1_message">Message:</label> 
     <textarea id="form1_message" name="message" cols="30" rows="10" required="required"></textarea> 
    </div> 
     <input value="SEND" type="submit" /> 
</form> 
</body> 
</html>

출처

2013-02-06 North Krimsly

을 보내 그것을 위해, 당신은 볼 것이다 이 공백은 3px 너비이며 주위에는 CSS를 사용하지 않습니다. 제출 버튼이 위의 입력란과 맞지 않는 이유는 해당 공백 때문입니다. 당신이 여백 왼쪽 사용

: 당신은 당신이 지금까지 한 일을 계속할 수있다 자신을 만족시키기 위해, 여분의 공백이 added.So 아니라고 버튼을 제출에 5em을, 나는를 제출 장소를 의미 너무 사업부 및 입력하기 전에 빈 라벨 태그를 사용하고

또는

가 너무 Chandrakant의 답변을 따를 수있는 CSS에서 마진 왼쪽를 제거합니다.

갱신 1 : 공백 때문에 당신은 단순히 당신을, 당신의 editor.So에 "Enter"키를 당신의 CSS를 변경 또는 매직 넘버를 사용하지 않고 그 공백을 제거 누르하는 새로운 라인의 것을

동일한 레이블에 다음 레이블과 입력을 작성하십시오.

... 
<div> 
    <label for="form1_name">Name:</label><input id="form1_name" name="name" type="text" placeholder="first and last name" required="required" /> 
</div> 

<div> 
    <label for="form1_email">Email:</label><input id="form1_email" name="email" type="email" placeholder="your email address" required="required" /> 
</div> 
...

시도해보십시오.

갱신 2 다음 button.If의 버튼이 있기 때문에 (기본적으로)를 국경 재산을 수직으로 필드 정렬되지 않은

홈페이지 이유 (버튼의 기본 테두리)을 만들 버튼의 테두리를 (이 경우에만 테두리 왼쪽 : 0px 필요) ~ 0px 버튼이 필드와 정렬되어 있습니다.

출처

2013-02-06 05:20:54 qwerty

설명해 주셔서 감사합니다. 5.2em과 같은 매직 넘버를 사용할 필요가 없도록 내 코드를 어떻게 변경해야합니까? 또한 공백 빈 레이블을 추가 할 필요가 없습니까? –

@NorthK 그 여분의 공백; (당신은 결코 원하지 않을 것입니다. 대답을 업데이트했습니다. 확인해보십시오. – qwerty

감사합니다. qwerty 님, 레이블과 입력 사이의 공백을 제거하려고했지만 제출 버튼이 계속 정렬되지 않았습니다. 당신의 대답은 당신이 무슨 일이 일어나고 있었는지 설명했기 때문입니다. 나는 수직으로 겹쳐진 레이블과 입력 필드를 사용하기로 결정했습니다. –

사용이

display: block; 
margin-left: 5.2em;

이것은 단지 당신이 픽셀 수준의 UI를 보면 버튼

출처

2013-02-06 04:29:16 Chandrakant

display : inline-block 및 ems를 사용하여 submit 버튼과 일치하는 양식 요소 얻기

답변

관련 문제