文字填充後不會對齊

我試圖讓我的網站響應，我給我的標題文本15px的填充但是如果文本延伸到一個新行上，下一行沒有得到正確的填充左邊。是否可以使文本對齊？文字填充後不會對齊

以下是該文本的截圖。

enter image description here

這裏是我使用的CSS。

.article_title { 

     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
     line-height: 10px; 
     color: #666; 
     font-weight: bold; 
     padding: 15px; 
    }

和我的HTML元素是

<span class="article_title">Building Refurbishment and Modernisation</span>

來源

2014-10-20 pocockn

嘗試添加'display：inline-block;'到'.article_title' – Anonymous 2014-10-20 09:43:32

在響應方您應該使用'em'而不是'px' – 2014-10-20 09:44:21

span是內嵌元素，這意味着左填充沒有被施加到它。

只需將display: block;添加到CSS代碼，它應該可以正常工作。

來源

2014-10-20 09:44:49

Wotks perfect，thank you – pocockn 2014-10-20 10:30:00

.article_title { 

    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
    line-height: 10px; 
    color: #666; 
    font-weight: bold; 
    padding: 15px; 
    display:block 
}

顯示：塊應該做的伎倆。注意我也將行高改爲15.

來源

2014-10-20 09:44:58

你可以只添加display：table;並刪除響應佈局的行高。

.article_title { 

     font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
     color: #666; 
     font-weight: bold; 
     padding: 15px; 
     display: table; 
    }

http://jsfiddle.net/oapu11q4/28/

來源

2014-10-20 09:46:25 brightboy2004

只要改變跨度覈實。使用跨度而強制它成爲塊元素是違反直覺的。

來源

2014-10-20 09:49:20 thordarson

文字填充後不會對齊

回答

相關問題