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>

Answer 2

您是否尝试将跨度向右或向左浮动？

float: left;

或者您可能会喜欢徽章。签出此链接：Bootstrap Badge

Answer 3

宽度为100px的Div将具有position:relative和span的绝对位置，分别为top:0和right:0

Answer 4

也请尝试使用

overflow: auto

也许可以帮忙，

Answer 5

只需显示：flex到div标签，即使标签有多行，它也可以将跨度保持在同一行

div {
  display: flex;
  }

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

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

5 个答案: