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

回答

相關問題