포럼 입력 100 % 너비

Question

검색 양식에 입력 폭을 100 %로 설정할 수 있습니다. 내가 잘못하고있는 것이 확실하지 않습니다. 어디에서나 100 % 설정 가능, 크기를 px로 설정하면 변경됩니다.

http://jsfiddle.net/26Gmz/

.searchInput { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border: 1px solid #CCCCCC; 
    border-radius: 5px; 
    display: table-cell; 
    height: 29px; 
    padding: 0 4px; 
    vertical-align: middle; 
    width: 100%; 
} 


.searchIn { 
    -moz-appearance: none; 
    -moz-box-sizing: border-box; 
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0); 
    border: 0 none; 
    font-size: 15px; 
    margin: 0; 
    outline-width: 0; 
    padding-left: 4px; 
    width: 97%; 
} 

       <form method="post"> 
         <div class="searchEn"> 
           <input type=hidden name="do" value=search> 
           <input type="hidden" name="subaction" value="search" /> 
           <div class="searchInput"> 
             <input class="searchIn" name="story" width="100%" type="text" /> 
           </div> 

         </div> 
       </form> 

Answer 1

난 당신이 (demo)

.searchInput { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border: 1px solid #CCCCCC; 
    border-radius: 5px; 
    display: block; 
    height: 29px; 
    padding: 0 4px; 
    vertical-align: middle; 
    width: 98%; 
} 

같은 당신이 (다음 98%에 width과) block에 .searchInput의 display 규칙을 변경 한 후있는 효과를 얻을 수 있다고 생각

또는 더 완벽한 수정 (패딩 및 너비 문제 해결)을 위해이 CSS (demo)를 사용할 수 있습니다 (변경 사항은 주석 처리되었습니다)

.searchEn { 
    background-image: linear-gradient(to bottom, #FFFFFF 0px, #DFDFDF 100%); 
    border-radius: 5px; 
    color: #000000; 
    /*Push the right side over slightly more*/ 
    padding: 4px 6px 4px 4px; 
} 
.searchInput { 
    background: none repeat scroll 0 0 #FFFFFF; 
    border: 1px solid #CCCCCC; 
    border-radius: 5px; 
    display: block; 
    height: 29px; 
    /*Remove padding from this element (now in the parent element)*/ 
    padding: 0; 
    vertical-align: middle; 
    /*These can be full width if you fix the padding on the parent element*/ 
    width: 100%; 
} 
.searchIn { 
    -moz-appearance: none; 
    -moz-box-sizing: border-box; 
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0); 
    border: 0 none; 
    font-size: 15px; 
    margin: 0; 
    outline-width: 0; 
    padding-left: 4px; 
    /*Center the input box better inside the container*/ 
    padding-top: 6px; 
    /*And make the input full width*/ 
    width: 100%; 
}