Html 表单div上的Css定位不正确

您好，我正在尝试在表单中的输入表单旁边放置一个名为label的div，它适用于表单中的第一个选择框。但是，对于后续的输入框或选择框，它的位置似乎并不相同，相反，它似乎位于标签div的中心

此外，名为context的div显示在输入框/选择框的右侧，但未正确定位。我使用了格式化表单的样式，它在过去工作得很好，但是在这里工作得不太好

重要的一点。。。。您需要在JSFIDLE中具体化html屏幕，以查看我遇到的问题

有人能解决这个问题吗。 欢迎任何帮助

insert.php

  <div id="contactform"> <!-- Contact Form Div -->
    <div id="formWrap">
    <div id="form">
    <form action="insert.php" method="post" name="insert" id="comments_form">
    <div class="row">
    <div class="label">No. of Bedroms</div>
    <div class="input"> 
            <select name="bedrooms" id="bedrooms" class="detail">

                </div> <!-- end input -->
                 <div class="context"> e.g. John Smith </div> <!-- end context -->
                </div> <!-- end .row -->
            </select> 
    <div class="row">
    <div class="label">Description</div>
    <div class="input">            
            <textarea name="description" name="description" id="description" class="detail"></textarea>
                 </div> <!-- end input -->
                 <div class="context"> e.g. 3 Bedroom house in London close to University bus stops. </div> <!-- end context -->
                </div> <!-- end .row -->      
    <div class="row">
    <div class="label">Road Name</div>
    <div class="input">        
            <input type="input" name="roadname" id="roadname" class="detail"/>
                 </div> <!-- end input -->
                 <div class="context"> e.g. New Road </div> <!-- end context -->
                </div> <!-- end .row -->                      
            <input type="submit" id="submit" name="submit" value="Submit Message" />
                    <div class="subimt"> </div> <!-- end submit -->                
        </form>
 </div> <!-- end form -->
 </div> <!-- end form wrapper -->​

---

​

您的结束标记来得太晚了。如果它直接移动到打开后的

（因此不再包含

div

标记），它似乎可以工作。

所有其余的“行”都嵌套在第一行中。这是故意的吗？这个例子很重要，发现问题是大海捞针。把你的例子简化为最小的代表性例子。简化后，您可能会自己发现问题。“请将相关的格式化代码内联（不要只链接到jsfiddle.net）以完成您的问题。”系统不允许您仅使用jsfiddle链接发布问题，这并不意味着您会说“哦，让我们把它放在代码块中，很好，现在它可以工作了！”这意味着您应该在问题中添加一些代码。另外，请为您的问题制作一个简化的测试用例。不要向我们扔这么大的代码块。添加一些真实代码的另一个原因是代码块中的链接不可点击。我建议尝试一个解决未来问题的方法。这个解决方案可以很容易地找到使用一个。适当的缩进也有帮助。

/*    ---------------------------------------------------------------------    * 
 *    Contact Form Styling 
 *    ---------------------------------------------------------------------    */

#formWrap {
background-color:#232527;
width:85%;
margin:0px 0px 0px 100px;
color:#FFF;    
padding: 16px 10px 40px;
}

#formWrap #form {
border-top:1px solid #EEE;
width:100%;

}

#form .row {
border-bottom:1px solid dotted #EEE;
display:block;
line-height: 38px;
overflow:auto;
padding: 24px 0px;
width: 100%;
}

#form .row .label {
font-size:16px;
font-weight:bold;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
width:180px;
text-align:right;
float:left;
padding-right:10px;
margin-right:10px;
}

#form .row .input {
float:left;
margin-right:10px;
/*width:auto;*/
width:285px;
}

#form .row .input2 {
float:left;
margin-right:10px;
/*width:auto;*/
width:466px;
}

#form .row .context {
color:#FFF;
font-size:11px;
font-style:italic;
line-height:14px;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
width:200px;
float:left;
}

.detail {
width:260px;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:20px;
padding:7px 8px;
margin:0px;
display:block;
border-radius:5px 5px 5px 5px;
background:#E9E9E9;
border:1px solid #CCC;
}

.detail:focus {
background:#FFF;
border:1px solid #999;
outline:none;    
}

.mess:focus {
background:#FFF;
border:1px solid #999;
outline:none;    
}    

.mess {
width:450px;
max-width:450px;
height:280px;    
overflow:auto;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:20px;
padding:7px 8px;
line-height: 1em;
margin:0;
display:block;
border-radius:5px 5px 5px 5px;
background:#E9E9E9;
border:1px solid #CCC;

}

#form #submit{ 
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
margin-top:-10px;
margin-left:200px;
cursor: pointer;
  background: #ffffff; 
color: #232527;
border-radius: 24px;
display: inline-block;
font-size: 14px;
font-weight: bold;
padding: 8px 32px;
-webkit-transition: background .1s linear;
-moz-transition: background .1s linear;
-o-transition: background .1s linear;
-ms-transition: background .1s linear;
transition: background .1s linear;
text-decoration: none;
border:none;    
}

#form #submit:hover{
    color:#5eb9f9;

}


span.error {
display:block;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
background-image:url(../images/x.png);
background-repeat:no-repeat;
background-postion:left 6px;
padding-left:25px;
font-size:11px;
}

#formWrap h2 {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
text=shadow: 1px 1px 1px #CCC;
color:#FFF;
font-weight:bold;
font-size:30px;
margin-left:25px;    
}