無需使用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，我能夠對齊輸入控件，但是我必須使用多個break標記（ <br /> ）和額外的對齊代碼，只需使用<table>標記即可更輕松地對齊。 有人可以建議我采用標准方法，而我是否走對了路？

Answer 1

盡管表格是表單的一種非常好的方法，但是我更喜歡更短，更容易的方法，即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 2

作為已經說過的話的一小部分補充，我建議您考慮對單個表單控件及其標簽使用單獨容器的選項。 像這樣：

<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提出了一個很好的觀點。 我仍然在許多地方找到用於表格的表格，盡管我寧願遠離這種方法。

PS如果要水平分布標簽和輸入，則可能要使用flexbox。

Answer 3

@iSahilSharma請在不使用表的情況下找到以下代碼。 希望您也一樣。 它的一部分只是一個建議，即開始使用Bootstrap框架而不是使用自定義編碼。

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

 <div class="main_container"> <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 4

使用表格並不總是很好。 一種方法是

   <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

Answer 5

出於多種原因，表不是一種好的方法，但是表非常適合您要創建的類型的表格。