html - 如何使输入元素填充父元素？

Question

我有以下 html:

<div class="container">
    <form>
        <input class="search" type="text" />
        <button class="submit" type="submit">Go</button>
    </form>
</div>

我试图使文本输入填充到容器的大小，减去将在右侧内联的 Go 按钮的宽度。但是，我似乎无法获得填充容器宽度的输入。我有以下 css(简化):

.container {
    height: 100%;
    position: relative;
    width: 100%;
}

.search {
    left: 0;
    position: absolute;
    right: 40px;
}

.submit {
    position: absolute;
    right: 0;
    width: 40px;
}

生成以下设计:

我实际上如何让内部文本框填充父级的宽度？不使用 %，因为我需要它一直延伸到按钮，不再延伸。

Answer 1

除非您使用 javascript 或 calc，否则输入框将重叠在按钮下方，因为它以 px 和 input 的百分比设置!

.search {
    left: 0;
    position: absolute;
    right: 60px;
    width:90%; /* this is the deal here*/
}

to get you started