html - 如何以html形式对齐输入标签？

Question

我现在正在制作一个留言簿页面，但在对齐输入字段以使其看起来不错时遇到了问题。现在它看起来非常丑陋而且没有组织。我只希望一切(输入)都能很好地排列。谢谢!

html:

<form>
Name <input type="text" name="guest" id="guest" input size="45"  maxlength="40" required/> <br />

E-mail address <input type="text" name="email" id="email" input size="60" maxlength="60" required/> <br />

City <input type="text" name="city" id="city" input size="35" maxlength="30" required/> <br />

 <select id="province" name="province" size="15" required>
        <option value="Alberta">Alberta</option>
        <option value="British Columbia">British Columbia</option>
        <option value="Manitoba">Manitoba</option>
        <option value="New Brunswick">New Brunswick</option>
        <option value="Newfoundland and Labrador">Newfoundland and  Labrador</option>
        <option value="Nova Scotia">Nova Scotia</option>
        <option value="Ontario" selected="selected">Ontario</option>
        <option value="Prince Edward Island">Prince Edward Island</option>
        <option value="Quebec">Quebec</option>
        <option value="Saskatchewan">Saskatchewan</option>
        <option value="Northwest Territories">Northwest Territories</option>
        <option value="Nunavut">Nunavut</option>
        <option value="Yukon">Yukon</option>
</select> <br />

Web Page URL <input type="text" name="web_url" id="web_url" input size="60" maxlength="60" /> <br />

Web Page Title <input type="text" name="web_title" id="web_title" input size="25"  /> <br />

<textarea rows="4" cols="50" name="comments" id="comments" >
Enter comments here...</textarea>

</form>

CSS:

body {
 max-width: 1000px;
 font-size: 14px;
 line-height: 1.4em;
 font-family: Helvetica, Verdana, sans-serif;
}

Answer 1

用 <label> 包裹标签标签:

<label>Name </label><input type="text" name="guest" id="guest" input size="45"  maxlength="40" required/> <br />

然后添加css:

label{width: 200px; float: left;}

Full code snippet