p style = display：內聯麻煩

我試圖創建一個列表，每個<li>在一行上。我的問題在於'食物4'，在那裏我需要一張描述<h4>的筆記;我似乎無法清除由<p>創建的換行符。我試過了<p style="display:inline>和我能想到的每一個變化。我錯過了什麼？p style = display：內聯麻煩

<div id="carte"> 
     <h3 class="list-title">Menu a la carte</h3> 
     <ul> 
      <li><h4>Food 1 $20</h4></li> 
      <li><h4>Food 2 $30</h4></li> 
      <li><h4>Food 3 $40</h4></li> 
      <li><h4>Food 4 $50</h4><p>vegetarian</p></li> 
      <li><h4>Food 5 $60</h4></li> 
     </ul> 
    </div>

來源

2012-06-19 AMC

嘗試顯示：inline-block的？ – csotelo

'沒有改變。 – AMC

您希望h4和p都爲display:inline。 h4默認爲display:block，所以它會佔用整條線。 p也是如此。我們可以將它們都設置爲內聯，因爲li也顯示爲塊。因此，li內的所有內容都是內聯的，但每個列表項仍顯示爲塊。

h4, p { 
    display: inline; 
}

See demo here

來源

2012-06-19 17:48:48 sachleen

你想要h4和p在同一行嗎？

h4是由Ed作爲blockdisplay默認並因此具有一個auto ... width這意味着整行。所以你應該顯示h4和p作爲inline和/或inline-block（或者甚至table-cell，如果你想垂直對齊）。

編輯：如果沒有文字後跟（p或列表），則不應使用標題。他們應該介紹部分內容。沒有內容，沒有標題;）除非常罕見的情況。 WCAG 2.0技術G141,H69,G130和H42詳細說明。
它可能在網上顯得很不起眼，但您不會在Word或Libre/OpenOffice中留下下面的段落。

來源

2012-06-19 17:42:58 FelipeAls

同時使用'

'和'

'並沒有對頁面做任何可見的修改。 – AMC

這樣做** ** ** h4 '和'p'。 – sachleen

謝謝@sachleen，我在回答中加入了大膽的風格:) – FelipeAls

p style = display：內聯麻煩

回答

相關問題