html - 如何制作从左边缘 1em 延伸到右边缘 1em 的输入？

Question

我想要一个输入，它始终是其父 div 的宽度减去 2em，并且从左边 1em 开始，到右边 1em 结束。我该怎么做？

我试过了，但是没用:

不工作

.myDiv
{
    position: absolute;
    left: 1em;
    right: 1em;
    display: block;
}

这总是太狭窄了。

Answer 1

在输入周围使用父 div 内的另一个 div，将输入设置为 100% 宽度并将包装 div 设置为边距:0 1em

http://jsfiddle.net/3g8khuus/

html

<div id='parent'>
    <div class='wrapper'>
        <input id='your_input' type='text' />
    </div>
</div>

CSS

.wrapper {
    margin: 0 1em;
}
#your_input {
    width: 100%;
    box-sizing: border-box;
}