風格只有下劃線

我有一個標題，使用text-decoration: underline;下劃線，唯一的問題是線太薄。我只想強調底線。我已經考慮使用border-bottom來做到這一點，但邊框延伸容器的整個寬度，文本居中。不起作用。風格只有下劃線

2013-07-02 L84

你可以用與周圍<span>標籤的文本，用display: inline-block;，刪除text-decoration: underline;財產，並添加border-bottom: 2px solid #000;

注：爲什麼要使用inline-block？所以，你還可以控制border和文本，使用padding或margins之間的間距，但如果你不要求 display: inline-block;你可以簡單地擺脫它作爲NullPoiиteя說。另外，請務必在父元素上使用一個類來選擇特定element.class對的特定span標記。

來源

2013-07-02 04:58:45

+1它看起來不錯，沒有內聯塊http://jsfiddle.net/vpqZX/ ..但內聯塊的東西也真的有幫助 –

@NullPoiиteя它會但我也提供了一個特定的原因，即「內聯塊;'會給他更好的控制權:) –

完美！謝謝！ – L84

嘗試這種風格

<h1 style="border-bottom: 5px solid black">This is heading 1</h1>

DEMO

來源

2013-07-02 05:03:35

這就是我所做的，正如我在我的問題中所說的那樣，它拉伸了容器的整個寬度。 – L84

很久以前，有一個在CSS3文本模塊CR，定義爲指定的厚度屬性text-underline-width。但是，它並沒有在瀏覽器中實現，並且在2005版本的模塊中被刪除。這間接表明，不可能在CSS中設置下劃線寬度。

關於使用border-bottom而不是text-decoration: underline，它是一個不同的屬性，具有不同的效果（邊框處於基本較低的位置），並且存在很多關於如何使其與文本一樣窄的問題，這似乎是這裏的問題。但最簡單的方法是使用跨越標題文本的一些內聯（文本級別）標記，例如

<h1><u>Your heading text</u></h1>

與例如，

u { text-decoration: none; border-bottom: 0.2em solid }

而不是u，你可以使用例如， span元素，但u的優點是至少可以產生一個簡單的下劃線，即使在瀏覽器中禁用CSS樣式時也是如此。使用u，您當然需要關閉其默認下劃線，以避免出現下劃線和下邊框。

來源

2013-07-02 07:58:04

風格只有下劃線

回答

相關問題