站長資訊網
在css中，可以利用display屬性消除標簽單獨占一行的樣式，當該屬性的值為“inline”時會設置標簽顯示為內聯(lián)元素，此時標簽前后沒有換行符，也就不會獨占一行；具體語法為“標簽元素對象{display:inline;}”。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css怎樣消除標簽單獨占一行的樣式
標簽之所以會單獨占一行，是因為有些標簽是塊級元素，塊級元素占據其父元素（容器）的整個水平空間，垂直空間等于其內容高度，因此創(chuàng)建了一個“塊”。想要消除標簽獨占一行，只需要將標簽設置為內聯(lián)元素，去掉元素前后的換行符。
這時候就需要用到display屬性，只需要將標簽的display屬性值設置為inline，就表示此元素會被顯示為內聯(lián)元素，元素前后沒有換行符。就能夠消除標簽獨占一行的效果了。
示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h3 class="h">測試標簽</h3> 測試文字 </body> </html>
輸出結果：
給標簽添加樣式之后：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style type="text/css"> .h{ display:inline; } </style> <body> <h3 class="h">測試標簽</h3> 測試文字 </body> </html>
輸出結果：
（學習視頻分享：css視頻教程）
