我正在制作一个留言簿页面,并且无法对齐输入字段,因此看起来不错。现在它看起来非常丑陋而且没有组织。我只是希望一切(输入)很好地排列。谢谢!
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;
}
答案 0 :(得分: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;}
答案 1 :(得分:0)
对于水平对齐:
将所有输入放在<div>
标记中,并将此css添加到其中:
div {
float: left;
}
垂直对齐:
将所有输入设为<div>
,并将每个输入设为一个列表:
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
使用此CSS:
div li {
float: left;
}
答案 2 :(得分:0)
秘密是DIV。
使用外部div围绕每个分组,并使用每个内联组的内部div(左=标题,右=输入字段)。
请注意,内部div会向左浮动 - 这会将它们并排放置。但它也会从HTML“流”中删除它们,.outer
div的高度为零。因此,我们添加overflow:______
(自动或隐藏)来对付此问题。 尝试删除overflow:hidden
并观看所有内容。
body {
max-width: 1000px;
font-size: 14px;
line-height: 1.4em;
font-family: Helvetica, Verdana, sans-serif;
}
.outer{overflow:hidden;margin-bottom:5px;}
.in_left {float:left;width:100px;padding-right:10px;text-align:right;}
.in_right{float:left;width:250px;}
.in_right input{width:250px;}
.outer:last-of-type{margin-bottom:25px;}
<form>
<div class="outer">
<div class="in_left">Name</div>
<div class="in_right"><input type="text" name="guest" id="guest" size="45" maxlength="40" required/></div>
</div><!-- .outer -->
<div class="outer">
<div class="in_left">E-mail address </div>
<div class="in_right"><input type="text" name="email" id="email" size="60" maxlength="60" required/> </div>
</div><!-- .outer -->
<div class="outer">
<div class="in_left">City</div>
<div class="in_right"><input type="text" name="city" id="city" size="35" maxlength="30" required/></div>
</div><!-- .outer -->
<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" size="60" maxlength="60" /> <br />
Web Page Title <input type="text" name="web_title" id="web_title" size="25" /> <br />
<textarea rows="4" cols="50" name="comments" id="comments" >
Enter comments here...</textarea>
</form>