首頁 >web前端 >css教學 >css怎樣設定p標籤不換行

css怎樣設定p標籤不換行

coldplay.xixi
coldplay.xixi原創
2021-03-02 11:02:124489瀏覽

css設定p標籤不換行的方法:使用了【display:inline】樣式使p標籤不換行,這個屬性用來定義建立佈局時元素產生的顯示框類型,程式碼為【p{display : inline;}】。

css怎樣設定p標籤不換行

本教學操作環境:windows7系統、css3版,DELL G3電腦,此方法適用於所有品牌電腦。

css設定p標籤不換行的方法:

我們使用了display:inline樣式讓p標籤不換行。

display樣式介紹:

display 屬性規定元素應該產生的框的類型。

這個屬性用來定義建立佈局時元素產生的顯示框類型。對於 HTML 等文件類型,如果使用 display 不謹慎會很危險,因為可能違反 HTML 中已經定義的顯示層次結構。對於 XML,由於 XML 沒有內建的這種層次結構,所有 display 是絕對必要的。

屬性值:

  • 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 此元素會作為一個表格儲存格顯示(類似

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

  • 範例

    css程式碼

    p{display: inline;}

    HTML程式碼

    <p>aaa</p> 
    <p>bbb</p>

    效果圖:

    css怎樣設定p標籤不換行

    相關教學推薦:CSS影片教學

    #

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

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

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