CSS球的位置

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

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

这里是我的CSS打造的“球”

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

的probleme是球以上职称，而不是在前面。我试图使用display:inline，但“球”需要在block。

有什么想法？

来源

2015-03-31 Weedoze

display：inline-block？ – 2015-03-31 14:33:50

难道你不能简单地把它放在绝对？ – TreeTree 2015-03-31 14:33:55

@MehdiBrillaud跨度？或包含h2 + span的div？ – Weedoze 2015-03-31 14:37:54

可能不是你要找的，但在这种情况下，你可以使用：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>

我相信“球”的大小是根据字体的大小和内容规则中的文本。请注意，颜色与背景颜色相同，实际上泡泡中有文字。

来源

2015-03-31 14:48:45 ferr

如果将其设置为“display：inline-block”，则可以使用'width'和'height'控制球的大小。 – 2015-03-31 14:52:43

@JamesMontagne是的，它的工作原理比将内容添加到内容规则更好，您可以将其保留为内容：''，它将遵守指定的尺寸。 – ferr 2015-03-31 14:56:30

如果没有关于此特定代码的最终结果或目的的全部上下文或知识，我会在@ ferr的回答之上进行构建。由于原来的问题是关于布局，我会建议从文本对象中进一步抽象布局，以便实现对不同用例和场景的更多控制。即说您决定'球'应该是顶部对齐，底部对齐或中间对齐，或者您希望'球'是正方形，或文本大小改变等等。我在代码中包含了与此相关的注释。

<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); 
}

来源

2015-03-31 16:29:09 petermarty

CSS球的位置

回答

相关问题