带填充的100％宽度输入

Question

如何制作左/右填充10px的textarea / input，并且与其父级一样宽。

textarea,input{
    padding:5px 10px 5px 10px; 
    width:100%;
}

在这种情况下，输入更广。

Answer 1

    textarea{
        box-sizing: border-box;
        width:100%;
        padding: 10px
    }

Answer 2

啊，好老Box Model。填充增加到宽度，因此为了达到预期的效果，您还必须在填充中使用百分比。试试这个：

textarea, input {
   padding: 1% 2% 1% 2%;
   width: 96%;
}

Answer 3

您可以在相关问题

中查看 answer

Demo on jsFiddle：

HTML标记：

<div class="input_wrap">
    <input type="text" />
</div>

<强> CSS：

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}

Answer 4

为你的css代码添加margin属性。