响应式输入字段宽度（或其他元素）答案

【问题标题】：responsive input field width (or other elements)响应式输入字段宽度（或其他元素）
【发布时间】：2013-08-06 06:37:47
【问题描述】：

我有一个在 div 内的输入文本字段，我想让它等于该 div 的宽度。我尝试通过 css 将宽度设置为与 div 相同，但是当我调整窗口大小时，输入字段出现缺陷..

【问题讨论】：

你能展示你的html和css吗？

标签： css

【解决方案1】：

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

【讨论】：

【解决方案2】：

如果您有填充，请使用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+ */
}

【讨论】：

【解决方案3】：

您始终可以将其宽度设置为100%。

【讨论】：

【解决方案4】：

将输入文本宽度设为 100%

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

【讨论】：

【解决方案5】：

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>

【讨论】：

【解决方案6】：

您可以使用

设置 Div 的属性

  overflow:hidden

并用

设置文本框

width:100%

为了避免这个问题。如果有帮助，请查看此小提琴http://jsfiddle.net/Rj8aj/

【讨论】：