Question

在“li”标签中，我有2个子标签：1“标签”和“跨度”。

# ignore all the rules for www.example.com domain
RewriteCond %{HTTP_HOST} ^(www\.)?example\.com$ [NC]
RewriteRule ^ - [L]

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

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

应该是这样的

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

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

非常感谢

Answer 1

我个人喜欢display: flex;样式属性。如果添加供应商前缀，浏览器支持目前还不错。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将float：left添加到内联css中以获得两个span。

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

Answer 3

您的解决方案是内联块，但没有包装新元素，作为您的请求：

label, span { display: inline-block; vertical-align:top;}
label {width: 25%;}
span {width:74%; }

<li>
  <label>labelname</label>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu lacinia risus. In hac habitasse platea dictumst. In egestas metus turpis, vel placerat magna pretium sed. Morbi rhoncus vehicula est, ac dapibus magna aliquam eget. Duis viverra posuere pretium. Donec eget fringilla eros. Etiam ut enim quis dui mattis consectetur. Integer dui dui, hendrerit ut vestibulum ac, aliquam vitae turpis. </span>
</li>

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

3 个答案: