我正在尝试制作一个可扩展的输入字段以在扩展时推送其他 div。到目前为止,它只覆盖了它应该推送的 div。任何想法如何使用 css 实现这一点?
input[type="text"] {
border-radius: 0;
height: 24px;
line-height: 24px;
outline: none;
position: absolute;
right: 10rem;
top: 5rem;
-webkit-transition: width 15ms ease;
-moz-transition: width 15ms ease;
-o-transition: width 15ms ease;
-ms-transition: width 15ms ease;
transition: width 2s ease;
width: 10%;
}
input[type="text"]:focus {
width: 30%;
}
.div-to-pushed {
height: 28px;
width: 10%;
border: 1px solid black;
position: relative;
top: 72px;
left: 300px;
}
https://stackblitz.com/edit/angular-ph3dmv?embed=1&file=src/app/app.component.ts
答案 0 :(得分:1)
问题是您的输入元素是绝对位置,这将其从文档流中移除。 删除绝对位置并删除两个元素上的顶部和左侧定位。
添加 justify-content: flex-end 到父容器;
代码示例:
.parent {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
div {
height: 28px;
width: 10%;
border: 1px solid black;
position: relative;
}
input {border-radius: 0;
height: 24px;
line-height: 24px;
outline: none;
transition: width 2s ease;
width: 10%;
}