響應輸入字段寬度（或其他元素）

Question

我有一個輸入文本字段，它是在一個div內，我想使它等於該div的寬度。我嘗試通過css設置與div相同的寬度，但是當我調整窗口大小時，輸入字段有缺陷..

Answer 1

如果有墊襯，使用http://css-tricks.com/box-sizing/

input{ 
    width:100%; 
    padding: 5px; 
    border:1px solid black; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
} 

Answer 2

您可以隨時將其寬度設置爲100%。

Answer 3

input{ 
    width: 100%; 
    box-sizing:border-box 
    } 

Answer 4

給輸入文本的寬度爲100％

<input type="text" style="width: 100%"/> 

Answer 5

您可以設置的div屬性與

overflow:hidden 

和設置文本框爲

width:100% 

避免這個問題。看到這個小提琴是否有助於http://jsfiddle.net/Rj8aj/

Answer 6

Demo Link用CSS

css

*{ 
    padding:0; 
    margin:0; 
    } 
body { 
    font:normal 12px/18px Arial, Helvetica, sans-serif; 
    color:#000; 
    padding:20px; 
    background-color:#F2F2F2; 
    } 
ul, li, ol { 
    list-style-type:none; 
    } 

.wrapper { 
    width:96%; 
    padding:2%; 
    margin:0 auto; 
    background-color:#3D3A40; 
} 
.greenBox { 
    background-color:#006600; 
    padding:50px; 
    } 
.spacer { 
    clear:both; 
    font-size:0; 
    line-height:0; 
    height:0; 
    } 
p { 
    padding-bottom:18px; 
    } 
input { 
    height:26px; 
    border: none; 
    color:#fff; 
    border:#83bbd9 1px solid; 
    width:100%; 
    font:normal 12px/26px Arial, Helvetica, sans-serif; 
    } 

HTML

<div class="wrapper"> 
    <div class="greenBox"> 
     <form action="" method="post"> 
      <input name="" type="text" /> 
     </form> 
    </div> 
</div>