테이블 형식 컨트롤이 HTML CSS

Question

나는 간단한 (하!) 테이블을 만들고 있습니다. 내가 포함시키고 자하는 것에 문제가있다.

1. 입력 필드의 왼쪽 가장자리를 정렬하고 싶습니다. 체크 박스와 버튼은 그렇지 않습니다.
2. 레이블 w.r.t.에 텍스트를 세로로 가운데 맞춤하고 싶습니다. 관련 텍스트 입력 컨트롤.
3. 최종 제출 버튼의 12em 여백을 피하고 싶습니다.

감사합니다. 어떤 아이디어라도 감사합니다.

p { 
 
     text-align: center; 
 
    } 
 
    p label { 
 
     float: left; 
 
     clear: left; 
 
     width: 20em; 
 
     text-align: right; 
 
     margin: .25em 1em 0em 0em; 
 
     padding: .25em; 
 
    } 
 
    p label input { 
 
     float: right; 
 
     clear: right; 
 
     padding: .25em; 
 
    } 
 
    #submit { 
 
     clear: both; 
 
     float: left; 
 
     margin: 1em 0em 0em 12em; 
 
     clear: left; 
 
     width: 6em; 
 
     text-align: center; 
 
     background: yellow; 
 
    } 
 
    p > input { 
 
     text-align: center; 
 
    } 
 
    span { 
 
     padding: 0em 1em 0em 0em; 
 
    }

<form> 
 
    <div> 
 
    <p> 
 
     <label><span>Name:</span> 
 
     <input id="name" type="text" placeholder="Name" autofocus required> 
 
     </label> 
 
    </p> 
 
    <p> 
 
     <label><span>Password:</span> 
 
     <input id="password" type="password" placeholder="Password" required> 
 
     </label> 
 
    </p> 
 
    <p> 
 
     <label><span>Are you a photographer?:</span> 
 
     <input id="photog" type="checkbox"> 
 
     </label> 
 
    </p> 
 
    <p> 
 
     <input type="submit" id="submit" value="Register"> 
 
    </p> 
 
    </div> 
 
</form>

Answer 1

이것은 원하는 모든 것을 수행하지는 않지만 시작일뿐입니다. 나는 <label> 요소의 외부에 <input> 요소를 취해서 <label>이 display: inline-block을 추가하여 고정 폭을 갖도록했습니다. 또한 <label>에 for 속성을 지정하여 해당 <input> 필드에 계속 연결되도록했습니다. 제출 버튼 앞에 빈 <label>을 추가하여 적절한 레이아웃을 얻습니다.

일반적으로 float을 가능한 한 적게 사용하고 html 요소를 직접 스타일 지정하는 대신 클래스를 사용하여 스타일을 지정하는 것이 좋습니다. 저는 개인적으로 항상 Bootstrap (이 경우 forms styling)을보고 어떻게하는지 봅니다.

label { 
 
    width: 11em; 
 
    display: inline-block; 
 
    text-align: right; 
 
    margin-right: .25em; 
 
    padding: .25em; 
 
} 
 
input { 
 
    padding: .25em; 
 
} 
 
#submit { 
 
    margin: 1em 0em; 
 
    text-align: center; 
 
    background: yellow; 
 
}

<form> 
 
    <div> 
 
    <p> 
 
     <label for="name">Name:</label> 
 
     <input id="name" type="text" placeholder="Name" autofocus required> 
 
    </p> 
 
    <p> 
 
     <label for="password">Password:</label> 
 
     <input id="password" type="password" placeholder="Password" required> 
 
    </p> 
 
    <p> 
 
     <label for="photog">Are you a photographer?:</label> 
 
     <input id="photog" type="checkbox"> 
 
    </p> 
 
    <p> 
 
     <label></label> 
 
     <input type="submit" id="submit" value="Register"> 
 
    </p> 
 
    </div> 
 
</form>

Answer 2

나의 제안은 처음에 테이블을 (하!)를 사용하는 것입니다.

은 사용을 고려 :

<table><tr><td></td></tr></table> 

http://jsfiddle.net/qy911wrb/이 추가되었습니다 일부 CSS는 사용자가 요청한 조절 하였다. 다른 시각적 조정이 필요한 경우 표시하십시오.