Question

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

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

这是我的css来创建＆＃34;球＆＃34;

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

问题是球在标题之上而不在前面。我尝试使用display:inline但是＆＃34;球＆＃34;需要在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>

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

Answer 2

如果没有关于此特定代码的最终结果或目的的完整背景或知识，我将在@ ferr的答案之上进行构建。由于最初的问题是关于布局;我建议从文本对象中进一步抽象布局，以便对不同的用例和场景实现更多控制。即假设你决定了球＃39;应该是顶部对齐，底部对齐或中间对齐，或者你想要“球”＃39;是一个正方形，或文字大小的变化，等等。我在代码中包含了与此相关的注释。

<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球位置

2 个答案: