在父容器中为文本框使用可用空间

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;
}