我有一个父容器,宽度可以是 50%、60% 等等。 在容器内部,有 3 个元素。
- 标签 - 应使用 100% 宽度,必须位于第一行。
- 文本框 - 使用父容器中的可用空间,这里的宽度也可以变化,如 50%、60% 等。
- 按钮后跟文本框,宽度应为 50px。
我想实现以下场景。在下面的场景中,按钮必须在文本框旁边。
- 父容器的宽度可能会有所不同,文本框应利用可用空间。
- 文本框宽度可以变化,所以按钮应该在文本框旁边。
请参阅附件以了解更多信息。 请帮我解决这个问题,只用 css 和 html,不用 js。
提前致谢。
最佳答案
你可以给你的按钮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;
}
关于html - 为父容器中的文本框使用可用空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25661353/