這里總結了五種關于文字兩邊添加橫線的方法。

歡迎補充！

最近的項目的設計經常用到文字兩邊添加橫線的方法,這樣看上去簡潔明了,當然實現的方法也五花八門.

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

詳細說明

在現代瀏覽器中瀏覽,全部可以正常顯示.

*第一種情況:

是用的標簽類名最為多的一個,而實際上會用到這樣去寫的很少,而且隨著偽類的出現,實現起來更加方便,但這個的兼容性好啊...

優: 兼容性強

弊: 繁瑣

*第二種情況:

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

優: 靈活性高

弊: 兼容性弱

*第三種情況:

這是兩個特別冷門的標簽 fieldset legend 在W3C里面解釋說

fieldset:組合表單中的相關元素

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

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

優: 兼容性好啊 賢心的layer說明文檔頁面就有用這個

弊: ---

第四種情況:

...這個可以不說明,就是請求的時候要多一張圖片,建議圖片做長一些.壓縮一下. 我這里用了10001的尺寸,原圖957B,壓縮之后107B

優: 自己衡量

弊: ----

*第五種情況:

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

優: 自己衡量

弊: IE7下看不到橫線了

*第六種情況:

使用:before :after寫的 優: 自適應性很好

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

如果需要字數限制，可以在a標簽加上

.sixth .sixth_main a {

padding: 0 15px;

flex-basis: 50%; //大小根據字數而定

text-align: center;

}

總結一下:

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。