css p標籤設定不換行的方法:先建立一個HTML範例檔;然後定義一些p標籤;最後透過在p標籤上新增css樣式為「p{display: inline;}」來實作不換行顯示即可。
本文操作環境:Windows7系統、HTML5&&CSS3版、Dell G3電腦。
css如何設定p標籤不換行?
p標籤是區塊級元素,會獨佔一行。如果我們想要設定兩個p標籤在同一行該如何設定呢?下面我們來看看使用css設定p標籤不換行的方法。
預設情況下p標籤會自動換行的,下面我們來看看使用css設定p標籤不換行的方法:
範例
# css程式碼
p{display: inline;}
HTML程式碼
<p>aaa</p> <p>bbb</p>
效果圖:
我們使用了display:inline樣式讓p標籤不換行。
display樣式介紹:
display 屬性規定元素應該產生的框的類型。
這個屬性用來定義建立佈局時元素產生的顯示框類型。對於 HTML 等文件類型,如果使用 display 不謹慎會很危險,因為可能違反 HTML 中已經定義的顯示層次結構。對於 XML,由於 XML 沒有內建的這種層次結構,所有 display 是絕對必要的。
【學習影片分享:css影片教學】
#屬性值:
none 此元素不會被顯示。
block 此元素將顯示為區塊級元素,此元素前後會帶有換行符號。
inline 預設。此元素會被顯示為內聯元素,元素前後沒有換行符號。
inline-block 行內塊元素。 (CSS2.1 新增的值)
list-item 此元素會顯示為清單。
run-in 此元素會根據上下文作為區塊級元素或內聯元素顯示。
compact CSS 中有值 compact,不過由於缺乏廣泛支持,已經從 CSS2.1 中刪除。
marker CSS 中有值 marker,不過由於缺乏廣泛支持,已經從 CSS2.1 中刪除。
table 此元素會以區塊級表格顯示(類似
和 | ) table-caption 此元素會顯示為表格標題(類似 inherit 規定應該從父元素繼承display 屬性的值。 |
---|
以上是css p標籤怎麼設定不換行的詳細內容。更多資訊請關注PHP中文網其他相關文章!