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

时间:2018-07-10 09:52:42

标签: html css

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

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

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

在CSS中更可取的解决方案

5 个答案:

答案 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)

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

float: left;

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

答案 2 :(得分:0)

宽度为100px的Div将具有position:relativespan的绝对位置,分别为top:0right: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>