我有一个看起来像这样的div
<div style="width:100px;">
<label>dynamic label name</label>
<span style="color:red;">*</span>
</div>
这里标签名称可以是动态的,并且可以具有不同的长度,因此,即使标签的长度更大并且到达第二行,span(*)也应保持在第一行。也就是说*对于任何长度的标签,都必须在第一行。
在CSS中更可取的解决方案
答案 0 :(得分:1)
Flexbox可能是一个选择
div {
position: relative;
margin: 1em auto;
border: 1px solid green;
display: flex;
}
span {
margin-left: auto;
}
<div style="width:100px;">
<label>dynamic label name</label>
<span style="color:red;">*</span>
</div>
<div style="width:100px;">
<label>label name</label>
<span style="color:red;">*</span>
</div>
或CSS-Grid
div {
position: relative;
margin: 1em auto;
border: 1px solid green;
display: grid;
grid-template-columns: 1fr auto;
}
<div style="width:100px;">
<label>dynamic label name</label>
<span style="color:red;">*</span>
</div>
<div style="width:100px;">
<label>label name</label>
<span style="color:red;">*</span>
</div>
答案 1 :(得分:0)
答案 2 :(得分:0)
宽度为100px的Div将具有position:relative
和span
的绝对位置,分别为top:0
和right:0
答案 3 :(得分:0)
也请尝试使用
overflow: auto
也许可以帮忙,
答案 4 :(得分:-1)
只需显示:flex到div标签,即使标签有多行,它也可以将跨度保持在同一行
div {
display: flex;
}
<div style="width:100px;">
<label>dynamic label name</label>
<span style="color:red;">*</span>
</div>