新手编码器在这里。我正在尝试构建一个简单的表单(第一个,最后一个,电子邮件,国家/地区),并且我有相应的标签。定位明智,我希望每个输入都有标签ABOVE。但是,我遇到的一些问题是将第一个和最后一个输入放在一起(水平放置),同时保持标签在上面。
<div id="firstlast" class="grid_8">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
<label for="last">Last Name</label>
<input type="text" name="last" id="last"><br>
</div>
和CSS
.firstlast div {
float: left;
clear: none;
display:inline;
}
我可以使用换行符将第一个定位在输入上,但换行符仍然应用到第二个标签和表单。
有关于此的任何想法吗?
谢谢!
答案 0 :(得分:1)
试试这个:
<form name="" method="post">
<div style="float:left;margin-right:20px;">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
</div>
<div style="float:left;">
<label for="last">Last Name</label>
<input type="text" name="last" id="last">
</div>
<label for="subject">Subject</label>
<input id="subject" type="text" value="" name="subject">
<label for="message">Message</label>
<input id="message" type="text" value="" name="message">
</form>
和CSS:
input, label {
display:block;
}
答案 1 :(得分:0)
您在css中定义.firstlast
类。但您使用 ID
html代码为什么
现在你可以试试这个
在css中定义label
display block
就像这样
label{
display:block;
magin-top:20px;
}
============================ 尝试第二种方法就是这个
HTML代码
<div id="firstlast">
<div class="grid_8">
<div class="control-group">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
</div> <div class="control-group">
<label for="last">Last Name</label>
<input type="text" name="last" id="last">
</div>
</div>
<div class="grid_8">
<div class="control-group">
<label for="first">email</label>
<input type="text" name="first" id="first">
</div> <div class="control-group">
<label for="last">country</label>
<input type="text" name="last" id="last">
</div>
</div>
</div>
<强>的CSS 强>
.grid_8{overflow:hidden;margin-top:20px;}
.control-group{
float:left;
width:50%;
}
.control-group label{
display:block;
}
答案 2 :(得分:0)
您需要将它们嵌套在自己的容器中并浮动它们。或者只做一个。
<div id="firstlast" class="grid_8">
<div style="float:left;">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
</div>
<label for="last">Last Name</label>
<input type="text" name="last" id="last"><br>
</div>
答案 3 :(得分:0)
如果我理解你的问题,你想要第一个标签和输入字段在水平和休息,你想要标签文字在输入字段的正上方。
这是css代码应该... .. / / p>
input[type="text"]{
padding:10px;
}
label{vertical-align:top;
padding:10px 0;
display:block;
}
#firstlast {
width:250px;
}
label:first-child, input:first-child{ display:inline; padding:0 5px 0 0;}
HTML应该是这样的。
<div id="firstlast" class="grid_8">
<label for="first">First Name</label>
<input type="text" name="first" id="first">
<label for="last">Last Name</label>
<input type="text" name="last" id="last">
<label for="email">e-mail</label>
<input type="text" name="email" id="email">
</div>
这是工作演示。 http://jsbin.com/nugucelu/1/edit