論壇輸入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%; 
} 

你之後通過改變 .searchInput的 display規則 block（然後 width到 98%）的影響

或者對於更完整的修復（解決一堆填充和寬度問題），您可以使用此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%; 
}