论坛输入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%; 
}