Html 如何使输入从左边缘的1米延伸到右边缘的1米？

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

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

不工作

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

最后总是太窄。

我建议：

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

---

将父对象的左、右填充设置为1em，并使输入宽度为100%

不要忘了使用框大小边框框，以防您想给输入本身一点左右的填充

---

示例：

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

html

---

将包装器div从左到右填充1em，然后将输入的宽度设置为100%：。要使其正常工作，应将

框大小

设置为

边框框

HTML:

下面是另一个不需要

边框框的版本：。为此，输入的边框被调零并替换为
轮廓
，这不会更改元素的尺寸

HTML:

父项的
位置是什么？@DavidThomas parent是绝对的，并且
左：0em；宽度：100%<div id='parent'>
    <div class='wrapper'>
        <input id='your_input' type='text' />
    </div>
</div>

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

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

* {
    box-sizing: border-box;
}

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

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

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

* {
    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%;
}