Web前端開發如何利用css樣式來控制Html中的h1/h2/h3標簽不換行


 

     H1/H2/H3/H4標題標簽常常使用在一個網頁中唯一標題、重要欄目、重要標題等情形下。 H1在一個網頁中最好只使用一次,如對一個網頁唯一標題使用。H2、H3、H4標簽則可以在一個網頁中多次出現,但必要隨意添加或添加過度。

     在Web前端開發中,經常要使用H1標簽對關鍵字進行優化,可是如果是一行文字中的某個詞加上了H1標記,就會換行。可以使用下面的方法,H標簽就不會強制換行了。Css控制為一行文字中某個字加上<h2>標簽不換行,display:inline; 解釋為:內聯對象的默認值。用該值將從對象中刪除行.

 

     display:inline-block;  

 

雖然這樣使用,基本上ie8和ie9、firfox、chrome瀏覽器都沒問題,但是在ie6和ie7下,卻是不行的。后面查證了相關資料,原來ie6和ie7是支持的,只是需

要增加一個hack即可,原來的代碼改為如下即可兼容所有瀏覽器了:

 

display:inline-block;  

*display: inline;  

*zoom: 1; 

 

解決方法舉例1:

<style type="text/css">

h1 {font-size: 12px;color: #000000; display : inline}

h2 {font-size: 12px;color: #000000; display : inline}

h3 {font-size: 12px;color: #000000; display : inline}

</style>  www.169it.com 

解決方法舉例2:

<style type="text/css">

h1 {font-size: 12px;color: #000000; display : inline}

h2 {font-size: 12px;color: #000000; display : inline}

h3 {font-size: 12px;color: #000000; display : inline}

</style>

<h1>CSS控制不換行的方法</h1>

<h2>CSS控制不換行的方法</h2>

<h3>CSS控制不換行的方法</h3>

 


本文來源:Web前端開發如何利用css樣式來控制Html中的h1/h2/h3標簽不換行


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM