3 小时以来,我一直在尝试编辑这个简单的表格以使其看起来不错,但我仍然没有完全做到。我希望输入字段自然地与标签位于同一行,但不知何故输入比标签低一点,我似乎无法用边距编辑它们。我做错了什么?
下面是表格的粗略图片:
//联系表格
<label for="name"><p>Name:</p></label>
<input type="text" name="name" id="name" tabindex="1" />
<br/>
<label for="email"><p>Email:</p></label>
<input type="text" name="email" id="email" tabindex="2" />
<br/>
<label for="subject"><p>Subject:</p></label>
<input type="text" name="subject" id="subject" tabindex="3" />
<br/>
<label for="comments"><p>Comments:</p></label>
<textarea name="comments" id="comments" cols="45" rows="5" tabindex="4"></textarea>
<br/>
<label for="submit"></label>
<input type="submit" name="submit" id="submit" value="Submit" tabindex="5" />
<label for="reset"></label>
<input type="reset" name="reset" id="reset" value="Clear" tabindex="6" />
//CSS
label {
float: none;
font-size: 100%;
width: 250px; /* just this width evens out input box placement */
font-weight: bold;
}
input { /*I think these just fall in because they are naturally following the labels!*/
width: 250px;
padding:5px;
margin-top: -10px;
}
textarea {
width: 250px;
height: 150px;
resize:none;
}
guestbook {
margin-top:50px;
text-align:center;
font-size:26px;
color:#05924b;
font-family:Gisha;
}
gb p {
color:#05924b;
font-family:Gisha;
text-align:left;
margin-left:85px;
margin-top:0px;
margin-bottom:0px;
}
//解决方案:从表单中删除“p”段落并从 CSS 调整其余部分,将 float:left 添加到不同的输入字段和行,降低标签宽度以使输入更接近,然后计算并放置input{} 和 textarea{} 的正确 margin-right,最后到 #submit 以使一切井井有条。 这是新代码的屏幕截图:http://snag.gy/PwpbQ.jpg
//CSS
/* Input */
label {
float: left;
font-size: 100%;
width: 50px; /* just this width evens out input box placement */
font-weight: bold;
margin: 2px 0;
padding:5px;
font-family: Gisha;
font-style: normal;
font-variant: normal;
text-decoration: none;
text-align: left;
}
input { /*I think these just fall in because they are naturally following the labels!*/
width: 300px;
padding:5px;
margin: 5px 0;
font-size:24px;
margin-right:192px;
}
textarea {
width: 300px;
height: 150px;
resize:none;
margin:5px 0;
padding:5px;
margin-right:192px;
}
#submit {
margin-right:225px;
}
/* End of input */
最佳答案
删除所有 <p>
标签中的标签。 <p>
标记是 block 级元素,因此不应嵌套在行内元素 <label>
中. block 级元素也很清晰,这意味着它们不允许任何一侧有内容(除非 float )。我相信这是导致您出现问题的原因。
<label for="name">Name:</label>
<input type="text" name="name" id="name" tabindex="1" />
<br/>
<label for="email">Email:</label>
<input type="text" name="email" id="email" tabindex="2" />
<br/>
<label for="subject">Subject:</label>
<input type="text" name="subject" id="subject" tabindex="3" />
<br/>
<label for="comments">Comments:</label>
<textarea name="comments" id="comments" cols="45" rows="5" tabindex="4"></textarea>
<br/>
<label for="submit"></label>
<input type="submit" name="submit" id="submit" value="Submit" tabindex="5" />
<label for="reset"></label>
<input type="reset" name="reset" id="reset" value="Clear" tabindex="6" />
标记调整后 label
和 input
标签没有垂直间距。要添加垂直间距,您可以为两个元素添加边距。
label {
font-size: 100%;
width: 250px;
font-weight: bold;
margin: 2px 0;
}
input {
width: 250px;
padding:5px;
margin: 2px 0;
}
关于html - 无法对齐联系人表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13755400/