양식 내용 너비 문제

겹쳐지는 점선이있는 연락처 양식이 있습니다. 왜 이렇게하는지 모르겠습니다. 내가 #form .row을 100% width로 설정했기 때문에 이것이 적응할 것이라고 생각했지만 작동하지 않습니다. 이 문제를 해결하고 양식 내부에서 어떻게 적용 할 수 있습니까?양식 내용 너비 문제

EXAMPLE

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 문제를 재현하기에 충분하지입니다. –

당신의 012,388 설정 이것에: 당신은 명시 적으로 형태보다 넓은 국경 100 픽셀을 설정 한 것이

출처

2012-07-19 18:15:30 CodingWonders90

을 수정해야

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

}

, 즉 이유입니다.

는 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

양식 내용 너비 문제

답변

관련 문제