html - 文本对齐与标签和长跨度文本不一致的解决方案

Question

在“li”标签内，我有 2 个子标签:1 个“label”和“span”。

<li>
  <label ...>labelname</label>
  <span>span value</span>
</li>

我遇到的问题是，当 span 中的文本变得很长时，会出现换行符，并且 span 文本会到达标签的一侧。

labeltext:           Here comes the very very long text of the span and
after the linebreak the text gets to the side of the label.  

应该是这样的

labeltext:           Here comes the very very long text of the span and     
                     after the linebreak the text gets to the side of the...

我知道对此的一种解决方案是插入另一个容器。

<li>
  <span style="display: inline-block; width: 30%;">
    <label>labelname</label>
  </span>
  <span style="display: inline-block; width: 70%;">
    <span>span value</span>
  </span>
</li>

我的问题是，如果没有插入额外容器的解决方案，只需向标签添加一些 css 属性即可。

提前致谢

Answer 1

我个人喜欢 display: flex; 样式属性。如果添加供应商前缀，浏览器支持现在就非常好。

li {
  display: flex;
}
li * { /* just for visible separation */
  padding: 0.5rem;
}

<li>
  <label>labelname</label>
  <span>span valueaasdfasdfasdf asdfasdfasdf asdfasdfasdf span valueaasdfasdfasdf asdfasdfasdf asdfasdfasdf</span>
</li>