在html和css中不使用表格的文本對齊方式

Question

我在學習HTML和CSS並通過創建一個帶有三個輸入控件（兩個文本和一個按鈕）的登錄頁面來使用舊式方法。但是，我正在使用<table></table>來解決文本框的對齊問題。但是我讀過一些使用表格並不被認爲是好的方法。這是我在做什麼：

的Home.html

<div> 
    <table> 
     <thead> 
      <tr><th><span>Login Page</span></th></tr> 
     </thead> 
     <tbody> 
      <tr> 
      <th><label>Username:</label></th> 
      <td><input type="text" value="" /></td> 
      </tr> 
      <tr> 
       <th><label>Password:</label></th> 
       <td><input type="text" value="" /></td> 
      </tr> 
      <tr> 
       <td><input type="button" value="Submit" /></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

不過，我使用CSS的一些初級東西對齊輸入控件，而無需使用表，這就是我米嘗試：

的Home.html

<div class="box"> 
    <span>Login Page</span> 
    <br /> 
    <span> 
     <label>Username:</label> 
     <input type="text" value="" /> 
     <br /> 
     <label>Password:</label> 
     <input type="text" value="" /> 
     <br /> 
     <input type="button" value="Submit" /> 
    </span> 
</div> 

的style.css

.box { 
    margin: 10px 10px 10px 10px; 
    border: dotted 2px #fff; 
    width: 500px; 
} 

.box span:first-child { 
    border: dotted 1px; 
    margin-left: 30%; 
    font-family: Arial, sans-serif; 
    width: 50%; 
} 

.box span label:nth-of-type(odd) 
{ 
    color:blue; 
    font-family: Arial, sans-serif; 
} 

.box span label:nth-of-type(even) 
{ 
    color: red; 
    font-family: Arial, sans-serif; 
    display: inline-block; 
} 

我擔心的是使用CSS，我能夠對齊輸入控件，但我不得不使用多個休息標籤（<br />），還額外的代碼比對其中通過簡單地使用<table>標籤更容易。有人可以向我建議標準方法嗎？或者我是否在正確的道路上？

Answer 1

@iSahilSharma請不用表格查找以下代碼。我希望你也期待着這一點。從它的一部分只是一個建議，開始使用Bootstrap框架，而不是使用自定義編碼。

.main_container{ 
 
    \t width:100%; \t 
 
    } 
 
    .inner_box { 
 
\t margin: 40px auto; 
 
\t width: 30%; 
 
    } 
 
    
 
    .inner_box span{ 
 
\t clear: both; 
 
\t display: block; 
 
    } 
 
    .inner_box span:first-child{ 
 
    \t margin-bottom:10px; 
 
    } 
 
    .inner_box span:nth-child(n+2){ 
 
    \t margin-bottom:20px; 
 
    }

<div class="main_container"> 
 
\t <div class="inner_box"> 
 
      <span>Login Page</span> 
 
      <span> 
 
       <label>Username:</label> 
 
       <input type="text" value="" /> 
 
      </span> 
 
      <span>  
 
       <label>Password:</label> 
 
       <input type="text" value="" /> 
 
      </span> 
 
      <span>  
 
       
 
       <input type="button" value="Submit" /> 
 
      </span> 
 
    </div> 
 
</div>

Answer 2

由於很多原因，表格並不是一個好方法，但表格對於您嘗試創建的類型的表單來說是理想選擇。

Answer 3

雖然表是形成一個很好的做法，但我更喜歡即CSS tables

這裏更短，更容易的方法是代碼：

form { 
 
    display: table; 
 
} 
 

 
p { 
 
    display: table-row; 
 
} 
 

 
label { 
 
    display: table-cell; 
 
} 
 

 
input { 
 
    display: table-cell; 
 
}

<form> 
 
    <p> 
 
    <label for="a">Short label:</label> 
 
    <input id="a" type="text"> 
 
    </p> 
 
    <p> 
 
    <label for="b">Very very very long label:</label> 
 
    <input id="b" type="text"> 
 
    </p> 
 
</form>

Answer 4

由於加入少量的對於已經說過的事情，我建議您考慮爲單個表單控件及其標籤使用單獨的容器的選項。就像這樣：

<form> 
    <div class="input-group"> 
     <label for="name">Username:</label> 
     <input type="text" id="name" value="" /> 
    </div> 
    <div class="input-group"> 
     <label for="password">Password:</label> 
     <input type="text" id="password" value="" /> 
    </div> 
</form> 

也許，有人會說這是多餘的，但是從我的角度來看，它給你定位的過程中更多的控制。另一方面，Michael Seltenreich是一個很好的觀點。我仍然在很多地方找到用於表格的表格，儘管我寧願遠離這種方法。

P.S.如果你想橫向擴展標籤和輸入，你可能會想要使用flexbox。

Answer 5

使用表並不總是好的。其中一個辦法就是

<div class="form-wrap"> 
    <h2>Login Form</h2> 
    <div class="form-field"> 
     <label>User Name</label> 
     <input type="text" value="" /> 
    </div> 
    <div class="form-field"> 
     <label>Password</label> 
     <input type="text" value="" /> 
    </div> 
    <input type="button" value="Submit" /> 
    </div> 

CSS：

.form-field label { 
    width: 80px; 
    display: inline-block; 
} 
.form-field { 
    margin-bottom: 10px; 
} 

鏈接codepen