我有一个看起来像这样的div
<div style="width:100px;">
<label>dynamic label name</label>
<span style="color:red;">*</span>
</div>
这里的标签名称可以是动态的并且具有不同的长度,因此即使标签的长度更长并且到达第二行,span(*) 也应该留在第一行。即对于任何长度的标签,* 必须在第一行。
CSS 中的首选解决方案
最佳答案
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>
关于html - 根据动态标签标签的位置设置跨度的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51262184/