這里總結(jié)了五種關(guān)于文字兩邊添加橫線的方法。

歡迎補(bǔ)充！

最近的項(xiàng)目的設(shè)計(jì)經(jīng)常用到文字兩邊添加橫線的方法,這樣看上去簡(jiǎn)潔明了,當(dāng)然實(shí)現(xiàn)的方法也五花八門.

暫且不說哪種方法好，鄧爺爺說過不管黑貓白貓抓到老鼠就是好貓.

詳細(xì)說明

在現(xiàn)代瀏覽器中瀏覽,全部可以正常顯示.

*第一種情況:

是用的標(biāo)簽類名最為多的一個(gè),而實(shí)際上會(huì)用到這樣去寫的很少,而且隨著偽類的出現(xiàn),實(shí)現(xiàn)起來更加方便,但這個(gè)的兼容性好啊...

優(yōu): 兼容性強(qiáng)

弊: 繁瑣

*第二種情況:

實(shí)際上使用:before 跟 :after 偽類寫成的,左右比例可以自由調(diào)節(jié).但頭痛的是IE7一下用不了T T

優(yōu): 靈活性高

弊: 兼容性弱

*第三種情況:

這是兩個(gè)特別冷門的標(biāo)簽 fieldset legend 在W3C里面解釋說

fieldset:組合表單中的相關(guān)元素

legend為 fieldset 元素定義標(biāo)題(caption).

據(jù)我了解:這兩貨是HTML4的產(chǎn)物,而在H5之后添加了3個(gè)新的屬性. 所以這兩貨兼容性也不差 [說錯(cuò)的地方希望指正] 但是在例子當(dāng)中, 它們對(duì)text-align:center特別不友好, 所以我在IE8- FF Safari Chrome 單獨(dú)做了hack

優(yōu): 兼容性好啊 賢心的layer說明文檔頁面就有用這個(gè)

弊: ---

第四種情況:

...這個(gè)可以不說明,就是請(qǐng)求的時(shí)候要多一張圖片,建議圖片做長(zhǎng)一些.壓縮一下. 我這里用了10001的尺寸,原圖957B,壓縮之后107B

優(yōu): 自己衡量

弊: ----

*第五種情況:

其實(shí)也是使用偽類去寫的,只不過相比第二種少了一個(gè)偽類

優(yōu): 自己衡量

弊: IE7下看不到橫線了

*第六種情況:

使用:before :after寫的 優(yōu): 自適應(yīng)性很好

弊: 兼容性不好，用到flex transform css3寫法

如果需要字?jǐn)?shù)限制，可以在a標(biāo)簽加上

.sixth .sixth_main a {

padding: 0 15px;

flex-basis: 50%; //大小根據(jù)字?jǐn)?shù)而定

text-align: center;

}

總結(jié)一下:

一般情況下,wap端我會(huì)使用第二或者第五中 (第六種)兼容性很好，感謝評(píng)論區(qū)@[深海哥哥]到的(https://www.jianshu.com/u/5e65e759535c)的提示

注意第一、五種情況,文字都是有用白色為背景色的,如果遇到底色為純色的情況下還可以繼續(xù)用,但是如果是圖片為背景的話,要么切圖對(duì)準(zhǔn),要么就換種方法吧,少折騰

總結(jié)

以上是生活随笔為你收集整理的h5的横线_CSS文字两边添加横线的几种方法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。