html - 根据动态标签标签的位置设置跨度的位置

Question

我有一个看起来像这样的div

<div style="width:100px;">
<label>dynamic label name</label>
<span style="color:red;">*</span>
</div>

这里的标签名称可以是动态的并且具有不同的长度，因此即使标签的长度更长并且到达第二行，span(*) 也应该留在第一行。即对于任何长度的标签，* 必须在第一行。

CSS 中的首选解决方案

Answer 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>