使用css調整下劃線和文本之間的距離

我想在文本和下劃線之間添加一些空格。但是當我嘗試在底部添加一些邊框時，它佔據了我的分辨率的100％寬度。所以它看起來像這樣：使用css調整下劃線和文本之間的距離

這裏是我的CSS：

h1 { 
    font-size: 24pt; 
    color: #279839; 
    position: relative; 
    text-decoration: none; 
    padding-bottom: 5px; 
    border-bottom: 1px solid #279839; 
}

我的頁面是多語種所以邊框底部應該是文本的寬度相同。

你能幫我嗎？

來源

2017-08-09 Jerielle

如果你不想換，通過一些其他的標籤，然後使用transform對準h1標籤頁，在與變化center這是display到inline-block這僅適用於one h1 tag，

h1 { 
 
    font-size: 24pt; 
 
    color: #279839; 
 
    position: relative; 
 
    text-decoration: none; 
 
    padding-bottom: 5px; 
 
    border-bottom: 1px solid #279839; 
 
    display: inline-block; /*Add this*/ 
 
    left: 50%; /*Add this*/ 
 
    transform: translate(-50%, 0); /*Add this*/ 
 
}

<h1>Hello</h1>

來源

2017-08-09 05:57:37 frnt

謝謝。我認爲沒有跨度會好得多，因爲我的頁面上有很多標題。 :) – Jerielle

@Jerielle當你添加它佔據100％的分辨率寬度，這是因爲你的元素顯示爲塊。歡迎:-)希望他們都是由一個圍繞它的母公司組成。 – frnt

再次感謝。說到CSS，我真的很窮。 :) – Jerielle

你可以添加display: inline-block;到<h1>或您添加h1內inline元素（如span）...

h1 { 
 
    text-align: center; 
 
} 
 

 
h1 span { 
 
    font-size: 24pt; 
 
    color: #279839; 
 
    padding-bottom: 5px; 
 
    border-bottom: 1px solid #279839; 
 
}

<h1><span>hello</span></h1> 
 
<h1><span>hello world</span></h1> 
 
<h1><span>hello world and univers</span></h1>

來源

2017-08-09 05:53:13 caramba

把span標記的H1內

<h1 class="the-h1"><span class="the-span">商品</span></h1>

css

.the-h1 { 
    text-align: center; 
} 
.the-span { 
    display: inline-block; 
    font-size: 24pt; 
    color: #279839; 
    position: relative; 
    text-decoration: none; 
    padding-bottom: 5px; 
    border-bottom: 1px solid #279839; 
}

來源

2017-08-09 05:54:15

第1步：您需要使H1顯示：inline-block;以便根據文本寬度而不是窗口寬度保留邊框。

第二步：爲了提供空間，您可以使用CSS僞元素

h1 { 
font-size: 24pt; 
color: #279839; 
position: relative; 
text-decoration: none; 
padding-bottom: 5px; 
display:inline-block; 
position:relative; 
margin: 0 0 10px; 
} 
h1:after { 
content:''; 
position: absolute; 
left:0; 
right:0; 
bottom:0; 
height:1px; 
background: #279839; 
display: block; 
}

來源

2017-08-09 05:57:00

您的h1標記默認情況下是一個塊元素，因此border-bottom可以穿過整個寬度。您需要更改標題的display屬性才能達到預期效果。

h1 { 
    display: inline-block; /* most solid one; best choice */ 
    display: initial;  /* most safe one can easily be overwritten */ 
    display: inline-flex; /* could be useful if people using flex-grids */ 
}

來源

2017-08-09 05:58:52

h1 { 
    display:Block; 
    width: 25% 
    position:relative; 
    margin-right:auto; 
    margin-left:auto; 
    font-size: 24pt; 
    color: #279839; 
    position: relative; 
    text-decoration: none; 
    padding-bottom: 5px; 
    border-bottom: 1px solid #279839; 
}

來源

2017-08-09 06:44:32

使用css調整下劃線和文本之間的距離

回答

相關問題