html - 为父容器中的文本框使用可用空间

Question

我有一个父容器，宽度可以是 50%、60% 等等。在容器内部，有 3 个元素。

1. 标签 - 应使用 100% 宽度，必须位于第一行。
2. 文本框 - 使用父容器中的可用空间，这里的宽度也可以变化，如 50%、60% 等。
3. 按钮后跟文本框，宽度应为 50px。

我想实现以下场景。在下面的场景中，按钮必须在文本框旁边。

1. 父容器的宽度可能会有所不同，文本框应利用可用空间。
2. 文本框宽度可以变化，所以按钮应该在文本框旁边。

请参阅附件以了解更多信息。请帮我解决这个问题，只用 css 和 html，不用 js。

提前致谢。

Answer 1

FIDDLE

你可以给你的按钮position:absolute。所以，它将粘在父容器的右侧。

CSS 将是:

.parent {
    margin: 20px;
    border: 1px solid #CCC;
    width: 50%;
    position: relative;
}
.parent label {
    display: block;
}
.parent [type="button"] {
    position:absolute;
    width:30px;
    height:30px;
    bottom:0px;
    right:0px;
}
.parent [type="text"] {
    width:100%;
    border:1px solid #CCC;
    padding:6px 10px;
    box-sizing:border-box;
}