表單內容寬度問題

我創建了一個具有重疊虛線的聯繫表單。我不知道爲什麼要這樣做。我已將#form .row設置爲100% width，所以我認爲這將使其適應，但它不起作用。我該如何解決這個問題，並讓它在表單內適應？表單內容寬度問題

enter image description here

CSS

<style> 
    #formWrap { 
     width: 600px; 
     margin-top:30px; 
     margin-left:30px; 
     background:#FFF; 
     padding: 16px 10px 40px; 


    } 

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

    } 


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

    } 

    #form .row .label { 
     color: #333333; 
     font-weight: bold; 
     font-size: 105%; 
     font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif; 
     width:140px; 
     text-align:right; 
     float:left; 
     padding-right:10px; 
     margin-right:10px; 

    } 

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

    .detail { 
     width: 260px; 
     font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif; 
     margin: 0; 
     display:block; 

    } 

    #form .row .context { 
     color:#999; 
     font-size: 11px; 
     font-style: italic; 
     line-height:14px; 
     font-family: trebuchet, 'trebuchet ms', 'tahoma', sans-serif; 
     width:150px; 
     float: left; 

    } 
</style>

HTML

<html> 
<div class="row"> 
    <div class="label">Contact Name *</div> <!-- end .label --> 
    <div class="input"> 
     <input type="text" id="contact_name" class="detail" name="contact_name" value="" /> 
        <span class="error"></span> 
    </div><!-- end .input--> 
     <div class="context"> e.g. John Smith or Jane Doe</div><!-- end .context --> 
    </div><!-- end .ronw --> 
</html>

來源

2012-07-19 techAddict82

您給我們的HTML不足以重現該問題。 – 2012-07-19 18:14:44

設置你的#formWrap #form這樣：

#formWrap #form { 
    border-top:1px dotted #F00; 
    width:600px; 

}

這應該修復它

來源

2012-07-19 18:15:30 CodingWonders90

你明確地設定了邊界100像素不是形式更廣泛，這就是原因。

調整表格的寬度formWrap的一個：

#formWrap { 
    width: 600px; 
    margin-top:30px; 
    margin-left:30px; 
    background:#FFF; 
    padding: 16px 10px 40px; 
} 

#formWrap #form { 
    border-top:1px solid #EEE; 
    width:600px; // instead of 700 
}

工作例如：http://jsfiddle.net/dystroy/xWNrd/

來源

2012-07-19 18:16:44

表單內容寬度問題

回答

相關問題