如何对齐标签和文本框？ CSS

Question

我有以下表格：http://imgur.com/pI812gr

使用这个CSS：

#myForm {
    margin: auto;
    width: 600px;
}
#myForm form {
    background-color: #E0E0E0;
    text-align: center;
    padding: 5px;
}
#myForm label {
    display: inline-block;
    text-align: left;
    width: 150px;
}
#myForm input {
    display: inline-block;
    text-align: center;
}
#myForm select {
    display: inline-block;
    width: 150px;
    text-align: left;   //this line does not seem to have any visible effects on the form
}

以下是jsfiddle的链接：https://jsfiddle.net/3d44j5to/

如何在表单中对齐标签和文本框，以及在提交和重置按钮之间留出更多空间？

Answer 1

使用＆＃34;表＆＃34; html的元素，并将您的标签放入＆＃34; td＆＃34;并输入另一个＆＃34; td＆＃34;。

像这样：

<form> 
<table> 
    <tr>
        <td>Label</td>
        <td><input type="text" name="" /></td>
    </tr>
    <tr>
    ....
    ....
    </tr>
    ....
  </table>
</form>

Answer 2

使用左对齐

myForm标签{

display: inline-block;
text-align: left; //change is here
width: 150px;

}