Question

我创建了一个重叠虚线的联系表单。我不知道为什么这样做。我已将#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>

Answer 1

将#formWrap #form设置为：

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

}

那应该解决它

Answer 2

你明确地将边框设置为比表格宽100px，这就是原因。

将表单的宽度调整为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/

表单内容宽度问题

2 个答案: