如何以html格式对齐输入标签?

时间:2016-03-19 19:56:00

标签: html css

我正在制作一个留言簿页面,并且无法对齐输入字段,因此看起来不错。现在它看起来非常丑陋而且没有组织。我只是希望一切(输入)很好地排列。谢谢!

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

3 个答案:

答案 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;}

Full code snippet

答案 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并观看所有内容。

jsFiddle for experimenting

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>