首頁  >  文章  >  web前端  >  css p標籤怎麼設定不換行

css p標籤怎麼設定不換行

藏色散人
藏色散人原創
2021-03-01 15:40:223918瀏覽

css p標籤設定不換行的方法:先建立一個HTML範例檔;然後定義一些p標籤;最後透過在p標籤上新增css樣式為「p{display: inline;}」來實作不換行顯示即可。

css p標籤怎麼設定不換行

本文操作環境: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>

效果圖:

css 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 此元素會以區塊級表格顯示(類似

),表格前後都會有換行符號。

inline-table 此元素會作為內嵌表格來顯示(類似

),表格前後沒有換行符號。

table-row-group 此元素會作為一個或多個行的分組來顯示(類似

)。

table-header-group 此元素會作為一個或多個行的分組來顯示(類似

)。

table-footer-group 此元素會作為一個或多個行的分組來顯示(類似

)。

table-row 此元素會顯示為一個表格行(類似

)。

table-column-group 此元素會作為一個或多個列的分組來顯示(類似

)。

table-column 此元素會作為一個單元格列顯示(類似

table-cell 此元素會作為一個表格單元格顯示(類似

table-caption 此元素會顯示為表格標題(類似

inherit 規定應該從父元素繼承display 屬性的值。

以上是css p標籤怎麼設定不換行的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn