CSS球位

Question

我有一个 <h2> <small> 的标题，我想在我的标题前添加一个彩球。

<span ng-class="{'greenBall' : order.state == 'Created'}">
<h2> Finalize <small>Some text</small> </h2>

这是我 css 创建的 "ball"

.greenBall{
  display: block;
  width: 1em;
  height: 1em;
  background-color: rgba(90, 189, 90, 1);
  border-radius: 50%;}

问题是球在标题上方而不是前面。我尝试使用 display:inline 但 "ball" 需要在 block.

中

有什么想法吗？

Answer 1

可能不是您想要的，但在这种情况下，您可以只使用 :before 选择器。

h2:before {
  content:'';
  display:inline-block;
  width: 1em;
  height: 1em;
  background-color: rgba(90, 189, 90, 1);
  border-radius: 50%;
}

<h2> Finalize <small>Some text</small> </h2>

我认为 "ball" 的大小取决于内容规则中字体和文本的大小。请注意，颜色与背景色相同，气泡中实际上有文字。

Answer 2

在没有关于此特定代码的最终结果或目的的完整上下文或知识的情况下，我将尝试在@ferr 的回答之上进行构建。由于最初的问题是关于布局的；我建议进一步从文本对象中抽象出布局，以便更好地控制不同的用例和场景。即假设您决定 'ball' 应该顶部对齐、底部对齐或中间对齐，或者您希望 'ball' 为正方形，或者文本大小发生变化，等等。我在代码中包含了与此相关的注释。

<div class="heading">
   <div class="heading-text">
      <h2>Finalize <small>Some text</small></h2>
   </div>
</div>

    .heading {
  font-size: 0; /* removes trailing white space for inline-block display of child nodes */
  line-height: 0; /* establishes a reset for auto line-height and can now be set on individual child nodes */
}

.heading-text {
  font-size: 20px; /* re-establishes according to the base object reset */
}

.heading-text > * {
  display: inline-block;
  padding-left: 6px; /* adjust accordingly */
  vertical-align: middle;
}

.heading-text:before {
  content: "";
  display: inline-block;
  width: .5em;
  height: .5em;
  vertical-align: middle; /* this can now control the vertical alignment of the 'ball' */
  border-radius: 50%;
  background-color: rgba(90, 189, 90); /* legacy fallback */
  background-color: rgba(90, 189, 90, 1);
}

CSS球位

CSS ball position

css

position