Question

新手编码器在这里。我正在尝试构建一个简单的表单（第一个，最后一个，电子邮件，国家/地区），并且我有相应的标签。定位明智，我希望每个输入都有标签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;
}

我可以使用换行符将第一个定位在输入上，但换行符仍然应用到第二个标签和表单。

有关于此的任何想法吗？

谢谢！

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

Answer 2

您在css中定义.firstlast 类。但您使用 ID html代码为什么

----------------------------------------------- ------

现在你可以试试这个在css中定义label display block就像这样

label{
    display:block;
    magin-top:20px;
}

Demo

============================ 尝试第二种方法就是这个

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

Demo

Answer 3

您需要将它们嵌套在自己的容器中并浮动它们。或者只做一个。

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

Answer 4

如果我理解你的问题，你想要第一个标签和输入字段在水平和休息，你想要标签文字在输入字段的正上方。

这是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

表格中的标签定位（使用div）

4 个答案:

----------------------------------------------- ------