Question

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

此外，被称为上下文的div意味着出现在输入框/选择框的右侧，但未正确定位。我已经使用了格式化表单的样式，它在过去已经完美运行但是在这里效果不佳。

重点......你需要在jsfiddle中重新调整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 -->

style.css

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

Answer 1

您的结束</select>标签迟到了。如果它在开始<select ...>之后直接移动（因此不再包含div标记），它似乎可以正常工作。

表单div上的Css定位无法正常工作

1 个答案: