只有內聯文本元素的bg顏色PADDING的一些問題

謝謝你的時間。我想背景顏色添加到只有文本和我設法與只有內聯文本元素的bg顏色PADDING的一些問題

.post-title { 
text-transform:capitalize; 
margin-top:4px; 
margin-bottom:1px; 
font-size:22px; 
background-color:#FFF; 
display:inline; 
} 

<div class="col-sm-4 featured"> 
    <center><img src="image/alutila.jpg"></center> 
    <div class="featured-text"> 
     <div class="meta">Environmental Science, Social Science</div> 
     <h2 class="post-title"><a href="#">This is the first time I am doing this</a></h2> 
    </div><!--featured text--> 
</div>

截圖這樣做：http://screencast.com/t/EwI0voEG

但你可以看到有對的左側或右側沒有填充文本。當我添加填充：5px 10px;到.post標題類它只會將填充添加到句子的第一個和最後一個單詞。此外，某些文字被背景遮擋。

截圖：http://screencast.com/t/DSsVKlQu

什麼是正確的方式來實現適當填充背景，使它看起來不錯。

來源

2014-11-21 Asif Irtiza Hussain

您必須爲.featured-text ...填充.post-title，您只能設置邊距。 H2行爲是默認爲塊...如果你想直列H2，必須設置顯示：內聯到.POST標題，而不是.featured文本

來源

2014-11-21 07:12:52 Mego

Try this 


.post-title { 
text-transform:capitalize; 
margin-top:4px; 
margin-bottom:1px; 
font-size:22px; 
background-color:#FFF; 
display:inline-block; 
}

來源

2014-11-21 07:13:37

謝謝，但這會爲整個div創建一個背景。我不想要整個div的BG，只是爲了帶有一點填充的文本。 – 2014-11-21 07:18:30

你可以請做jsfiddle – 2014-11-21 08:02:35

應用line-height了點。

.post-title 
    { 
    text-transform:capitalize; 
    margin-top:4px; 
    margin-bottom:1px; 
    font-size:22px; 
    line-height:32px; 
    background-color:#FFF; 
    display:inline; 
    }

來源

2014-11-21 07:20:26

謝謝！我應該怎麼做左右填充？ – 2014-11-21 07:54:58

只有內聯文本元素的bg顏色PADDING的一些問題

回答

相關問題