我有这段代码:
HTML:
<div class="propertyContainer">
<div class="property">
<label>This one is a very long label</label>
<select></select>
</div>
<div class="property">
<label>Short label</label>
<select></select>
</div>
</div>
CSS:
.propertyContainer{
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 0 0 450px;
min-height: 30px;
}
.property {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 10px;
height: 30px;
}
label {
height: 30px;
line-height: 30px;
vertical-align: middle;
}
select {
width: 200px;
height: 30px;
}
结果:
我遇到了问题,当我的标签很长时,它没有包裹它。我尝试使用max-width: 150px;
作为我的label
,但是它只是重叠了另一个标签而没有浮动容器:
我不知道如何解决这个问题。我只想设置一个max-width而不是包装标签并浮动conatiner所以它应该是这样的:
我搜索并尝试了很多,但目前我还没有解决方案。我也尝试过word-wrap: break-word;
,但也出错了。有什么想法吗?
答案 0 :(得分:2)
您只需在display: flex
上设置property
,flex: 1
和select
设置label
.propertyContainer {
border: 1px solid black;
max-width: 450px;
padding: 5px;
}
.property {
display: flex;
align-items: flex-start;
padding: 5px;
}
label,
select {
flex: 1;
}
<div class="propertyContainer">
<div class="property">
<label>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minim</label>
<select></select>
</div>
<div class="property">
<label>Short label</label>
<select></select>
</div>
</div>