Question

我有这个基本设置：

  <ul class='collection'>
    <li class='collection-item'><strong>Name:</strong> Tim</li>
    <li class='collection-item'><strong>Current Location:</strong> Kansas</li>
  </ul>

我想要一个将非粗体文本浮动到右边的规则。目前我已经尝试过：

li > :not(strong){
  float: right;}

但它不会影响强文。如果我将非粗体文本包装在<p>元素中并执行

li > p {
  float: right;}

它增加了一条额外的线，我想避免。我错误地使用了:not选择器吗？还有另一种方法来实现这一目标吗？感谢

Answer 1

您可以使用flexbox，因此它可以将纯文本转换为匿名弹性项目。

.collection-item {
  display: flex;
  justify-content: space-between;
}

<ul class='collection'>
  <li class='collection-item'><strong>Name:</strong> Tim</li>
  <li class='collection-item'><strong>Current Location:</strong> Kansas</li>
</ul>

您还可以尝试文本对齐和浮动技巧。

.collection-item {
  text-align: right;
}

.collection-item strong {
  float: left;
}

<ul class='collection'>
  <li class='collection-item'><strong>Name:</strong> Tim</li>
  <li class='collection-item'><strong>Current Location:</strong> Kansas</li>
</ul>

CSS规则适用于某些孩子但忽略其他孩子

1 个答案: