Question

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

我试过这个，但它不起作用：

不工作

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

这总是过于狭窄。

Answer 1

在输入中使用父div内的另一个div，将输入设置为100％宽度，将包装div设置为margin：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;
}

Answer 2

我建议：

.myDiv {
    display: block;
    width: calc(100% - 2em);
    margin: auto;
}

Answer 3

您为父级左侧和右侧填充1em并使输入宽度为100％。

如果你想给输入本身留下一些左右填充，请不要忘记使用box-sizing边框。

示例：http://jsbin.com/datihuquzo/1/

Answer 4

从左侧和右侧填充包装器div 1em，然后将输入的宽度设置为100％：http://jsfiddle.net/fdoLx261/。要实现此目的，box-sizing应设置为border-box。

HTML：

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

CSS：

* {
    box-sizing: border-box;
}

div {
    width: 500px;
    margin: 0 auto;
    outline: 1px dotted gray;
    padding: 5px 1em;
}

div > input[type = "text"] {
    width: 100%;
}

这是另一个不需要border-box的版本：http://jsfiddle.net/0Ln6nrky/。为此，输入的边框被清零并替换为outline，这不会改变元素的尺寸。

HTML：

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

CSS：

* {
    padding: 0;
    margin: 0;
}

body > div {
    width: 500px;
    margin: 0 auto;
    outline: 1px dotted gray;
    padding: 5px 0;
}

body > div > div {
    margin: 0 1em;        
}

div > input[type = "text"] {
    border: 0;
    outline: 1px solid gray;
    width: 100%;
}

如何进行从左边缘1em延伸到右边缘1em的输入？

4 个答案: