디스플레이 : 테이블, 레벨이 아닌 행

Question

테이블 레이아웃을 사용하여 양식을 표시하려고했습니다. 나머지 단추는 제출 단추와 수평이 아니므로이 문제를 해결하는 방법을 모르겠습니다.

도움을 주시면 감사하겠습니다.

CSS :

이

body 
{ 
    display:table 
} 

col1,col2 
{ 
    display:table-cell; 
} 

http://jsfiddle.net/uhqAX/

Answer 1

CSS는 :

body 
{ 
    display:table 
} 
div.row 
{ 
    display:table-row; 
} 
div.cell 
{ 
    display:table-cell; 
} 

HTML : 당신은 테이블 레이아웃을 사용

<div class="row"> 
    <div class="cell"> 
     <label for="Username">Username</label> 
    </div> 
    <div class="cell"> 
     <input data-val="true" data-val-length="The Username must be at least 5 characters long." data-val-length-max="10" data-val-length-min="5" data-val-required="The Username field is required." id="Username" name="Username" type="text" value="" /> 
    </div> 
</div> 
<div class="row"> 
    <div class="cell"> 
     <label for="Password">Password</label> 
    </div>  
    <div class="cell"> 
    <input data-val="true" data-val-length="The Password must be at least 4 characters long." data-val-length-max="10" data-val-length-min="4" data-val-required="The Password field is required." id="Password" name="Password" type="text" value="" />  
    </div> 
</div> 
<div class="row"> 
    <div class="cell"> 
     <input id="resetButton" type="reset" value="Reset" runat="server"/> 
    </div> 
    <div class="cell"> 
     <input id="submitButton" type="submit" value="Submit" runat="server"/> 
    </div> 
</div> 

방법이 올바르지 않습니다. 코드에는 실제로 셀이 2 개만 있고 <br/>을 사용하여 새 행을 만들면 테이블 레이아웃이 작동하지 않습니다.

체크 demo. 당신이 알 경우이 데모에서는, 당신은 텍스트 UserName, Password가 수직으로

올드 정렬되는 것을 볼 수 있습니다 :이 경우 테이블 태그를 사용하지 않는 이유

궁금. 테이블 태그를 사용하지 않는 이유는 "시맨틱 웹"입니다 : 당신은 display:table, display:table-row, display:table-cell를 사용하여

업데이트를 브라우저 호환성에 문제가 (모든 브라우저 지원) 것을 알아야한다. 우리는 프레젠테이션이 아닌 의미에 따라 태그를 선택합니다. 이 경우 테이블 태그는 레이아웃이 아닌 테이블 형식 데이터 용이므로 테이블 태그는 적합하지 않습니다. 프리젠 테이션은 CSS 역할이어야합니다.