如何使用h1添加一行：使用填充後的h1元素後

當我嘗試使用填充創建h1元素並將其設置爲內聯，然後使用h1跟隨屏幕寬行：在結束後新行上的h1元素的填充，我怎樣才能讓h1元素的paddin在水平行之前？如何使用h1添加一行：使用填充後的h1元素後

css代碼如下。

h1 { 
    font-size: 15px;  
    background: #ccc; 
    display: inline; 
    padding: 8px 0px 5px 10px; 
} 


.headline { 
    font-family: Calibri, "Helvetica", san-serif; 
    line-height: 1.5em; 
    color: black; 
    font-size: 20px; 
} 

h1:after { 
    content:' '; 
    display:block; 
    border:4px solid #ccc; 
    border-radius:1px; 
    -webkit-border-radius:1px; 
    -moz-border-radius:1px; 
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05); 
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05); 
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05); 
}

而html代碼只是一個帶有h1元素內類標題的跨度。

目前，它看起來像這樣：我希望它看起來幾乎相同的不同之處在於，使程序在文本的最後把線下的填充。

來源

2017-09-14 LuckAss

我添加展示它的外觀圖片和我多麼希望我看描述。 – LuckAss

非常感謝！這樣比我敢說更長;） – LuckAss

你正在過問這個問題。

將h1作爲塊級別項目並將樣式左右移動到span。

h1 { 
 
    font-size: 15px; 
 
} 
 

 
.headline { 
 
    font-family: Calibri, "Helvetica", san-serif; 
 
    line-height: 1.5em; 
 
    color: black; 
 
    font-size: 20px; 
 
    background: #ccc; 
 
    padding: 8px 10px 3px 10px; 
 
} 
 

 
h1 { 
 
    border-bottom: 4px solid #ccc; 
 
}

<h1><span class="headline">Headline</span></h1>

來源

2017-09-14 13:51:48

嘗試 h1顯示：-webkit-inline-box;或inline-flex;

來源

2017-09-14 13:50:19

如何使用h1添加一行：使用填充後的h1元素後

回答

相關問題