在表单中对齐文本区域

Question

我只是想知道我应该怎么做才能对齐表单中的文本区域，以便它们都处于同一级别。

我的代码是：

    <form method="post" action="process.php" id="contactForm">
    <fieldset id="field1">
        <div class="subscribe">
            <label for="fName">First name:</label>
            <input type="text" name="fName" id="fName" required/>
        </div>
        <div class="subscribe">
            <label for="lName">Last name:</label>
            <input type="text" name="lName" id="lName" required/>
        </div>
        <div class="subscribe">
            <label for="title">Title:</label>
            <select name="title" id="title" required>
                <option value="1"> Mr. </option>
                <option value="2"> Ms. </option>
                <option value="3"> Mrs. </option>
                <option value="4"> Miss. </option>
                <option value="5"> Master. </option>
            </select>
        </div>  
        <div class="subscribe">
            <label for="hNumber">Health Authority Number:</label>
            <input type="text" name="number" id="hNumber" required/>
        </div>
        <div class="subscribe">
                <label  for="email">Email address: </label>
                <input type="email" name="email" id="email" required/>
        </div>
        <div class="subscribe">
            <label for="fNr">Telephone number:</label>
            <input type="text" name="fNr" id="fNr" required/>
        </div>
        <div class="button">
            <input id="btn1" type="button" value="Submit"> 
        </div>
    </fieldsed>
</form> 

这个 CSS 代码不会这样做：

#contactForm {
    width: 46em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

#contactForm label {
    padding: 0.5em;
    display: inline;
    float: center;
}

感谢您的回答。我知道这是菜鸟的东西，但它会帮助我立即获得答案，而不是通过学习找到答案。

Answer 1

试试看：

1. 改用内联块；
2. 设置固定宽度
3. 删除您的填充

我想就是这样

#contactForm label {    
display: inline-block;
width: 200px;
text-align: left;
}