为什么选择框和文本框的div宽度不同？

Question

这是我在我的页面中使用的代码

HTML

<div class="dec">
<select>
    <option selected="selected" value="0">1</option>
    <option value="2">2</option>
    <option value="-1">3</option>
</select>
</div>
<div>
<input name="im_q" id="im_q" type="text" class="dec" placeholder="Texto a Buscar" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Texto a Buscar'" />
</div>

CSS

.dec select {
padding-top: 5px;
width: 108%;
border: none;
box-shadow: none;
background: transparent;
background-image: none;
-webkit-appearance: none;
background-image:url('carat-d-black.png');
background-position:90% 70%;
background-repeat:no-repeat;
 }
.dec {
 border: 1px solid #BBBBBB;
border-radius: 4px;
box-shadow: 2px 2px 2px #BBBBBB;
height: 35px;
margin-bottom: 5px;
margin-top: 5px;
overflow: hidden;
width: 99.5%;
 }

我使用相同的css进行选择和文本框。问题是当我们改变（减少）窗口的大小时，选择框大小小于文本框。但我想要两者的大小相同。 Jsfiddle：http://jsfiddle.net/f7pGV/

请任何人帮助我。

Answer 1

我猜你已经将类'dec'添加到包含Select的div中，然后将相同的类添加到输入而不是容器div。

将结构更改为

   <div class="dec">
      <select>
       <option selected="selected" value="0">1</option>
       <option value="2">2</option>
       <option value="-1">3</option>
     </select>
 </div>
 <div class="dec">
    <input name="im_q" id="im_q" type="text"  placeholder="Texto a Buscar" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Texto a Buscar'" />
</div>

并将其添加到css

.dec input{
   width:100%;
   height:100%
 } 

检查此jsfiddle http://jsfiddle.net/f7pGV/2/