0

こんにちは、フォームの最初の選択ボックスで機能する入力フォームの横にある label という名前のフォームに div を配置しようとしています。ただし、後続の入力ボックスまたは選択ボックスと同じように配置されているようには見えず、代わりにラベル div が中央に配置されているようです。

さらに、コンテキストと呼ばれる div は、入力ボックス/選択ボックスの右側に表示されることを意図していますが、そこに正しく配置されていません。私は書式設定フォームのスタイルを使用しており、過去には完全に機能していましたが、ここではうまく機能していません。

重要なポイント....私が抱えている問題を確認するには、jsfiddle で html 画面のサイズを変更する必要があります。

JsFiddle の例

誰でもこの問題の解決策を持っていますか。どんな助けでも大歓迎です！

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

スタイル.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;    
}

</p>

4

1 に答える 1

1

終了</select>タグが遅れています。オープニングの直後に移動した場合（したがって、タグ<select ...>が含まれなくなった場合）、機能するようです。div

于 2012-11-06T20:25:38.983 に答える