2

我创建了一个具有重叠虚线的联系表格。我不确定为什么要这样做。我已经设置#form .row好了，100% width所以我认为这会使其适应，但它不起作用。我该如何解决这个问题并让它适应表单？

例子

在此处输入图像描述

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

2 回答 2

1

设置你 #formWrap #form 这个：

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

}

那应该解决它

于 2012-07-19T18:15:30.800 回答
1

你已经明确地将边框设置为比表单宽 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/

于 2012-07-19T18:16:44.077 回答