Align textarea in form | 易学教程

问题

I was just wondering what shall I do to align the text area in a form so they can be all at the same level.

my code is:

    <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>

This CSS code won't do it:

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

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

Thank you for your answers. I know is noobies stuff but it will help me at the minute to get the answer rather then find it out by studying.

回答1:

Try that:

use inline-block instead;
set a fixed width
delete your padding

I think that's it

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

来源：https://stackoverflow.com/questions/24682823/align-textarea-in-form

标签

html5

forms

alignment

textarea