p標籤是塊級元素,會獨佔一行。如果我們想要設置兩個p標籤在同一行該如何設置呢?下面我們來看一下使用css設置p標籤不換行的方法。
默認情況下p標籤會自動換行的,下面我們來看一下使用css設置p標籤不換行的方法:
示例
p{display: inline;}<p>aaa</p>
<p>bbb</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 此元素會作爲塊級表格來顯示(類似 <table>),表格前後帶有換行符。
inline-table 此元素會作爲內聯表格來顯示(類似 <table>),表格前後沒有換行符。
table-row-group 此元素會作爲一個或多個行的分組來顯示(類似 <tbody>)。
table-header-group 此元素會作爲一個或多個行的分組來顯示(類似 <thead>)。
table-footer-group 此元素會作爲一個或多個行的分組來顯示(類似 <tfoot>)。
table-row 此元素會作爲一個表格行顯示(類似 <tr>)。
table-column-group 此元素會作爲一個或多個列的分組來顯示(類似 <colgroup>)。
table-column 此元素會作爲一個單元格列顯示(類似 <col>)
table-cell 此元素會作爲一個表格單元格顯示(類似 <td> 和 <th>)
table-caption 此元素會作爲一個表格標題顯示(類似 <caption>)
inherit 規定應該從父元素繼承 display 屬性的值。