我试图将前两个子元素保留在同一行中,而第三个元素以全宽度保留在自己的下面,所有这些都使用flex。
我对在前两个元素上使用flex-grow和flex-shrink属性特别感兴趣(这是我不使用百分比的原因之一),但是第三个元素确实必须为全角且在前两个元素以下。
当发生错误并且我无法更改代码时,以label编程方式将元素添加到text元素之后。
如何强制label元素在使用flex定位的其他两个元素下方跨越100%的宽度?
.parent {
display: flex;
align-items: center;
width: 100%;
background-color: #ececec;
}
.parent * {
width: 100%;
}
.parent #text {
min-width: 75px;
flex-shrink: 2.25;
}
<div class="parent">
<input type="range" id="range">
<input type="text" id="text">
<label class="error">Error message</label>
</div>
眼眸繁星
潇潇雨雨