无需使用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

出于多种原因，表不是一种好的方法，但是表非常适合您要创建的类型的表格。