ul li{
display: inline;
}<ul>
<li>
<div>
<p>This is some text in list 1 and is in a div tag</p>
</div>
</li>
<li class="li_2">
<div>
<p>This is some text in list 2 class and is in a div tag</p>
</div>
</li>
</ul>我怎樣才能使串列行內顯示？我認為它不是，因為串列項包含div標簽，但我不確定。我希望串列中的每個專案彼此相鄰。
uj5u.com熱心網友回復：
使用 flexbox css 很簡單
ul{
display: flex;
gap: 20px;
list-style: none;
}<ul>
<li>
<div>
<p>This is some text in list 1 and is in a div tag</p>
</div>
</li>
<li>
<div>
<p>This is some text in list 2 class and is in a div tag</p>
</div>
</li>
</ul>uj5u.com熱心網友回復：
我不確定你想要發生什么，但如果你想創建形成水平相鄰的矩形元素的串列項，請使用display: inline-block;并為它??們定義 a width。默認情況下，其中的divs 和p元素將具有全寬，即您為行內塊定義的寬度：
ul li{
display: inline-block;
width: 30%;
border: 1px solid #ddd;
}<ul>
<li>
<div>
<p>This is some text in list item 1 and is in a div tag</p>
</div>
</li>
<li class="li_2">
<div>
<p>This is some text in list item 2 and is in a div tag</p>
</div>
</li>
<li>
<div>
<p>This is some text in list item 3 and is in a div tag</p>
</div>
</li>
</ul>如果您真的希望所有內容都行內（包括串列項的內容，即divs 和p標簽），則需要將其應用于display: inline所有內容（但我無法想象這樣的情況是可行的......） ：
li, div, p {
display: inline;
}<ul>
<li>
<div>
<p>This is some text in list item 1 and is in a div tag</p>
</div>
</li>
<li class="li_2">
<div>
<p>This is some text in list item 2 and is in a div tag</p>
</div>
</li>
<li>
<div>
<p>This is some text in list item 3 and is in a div tag</p>
</div>
</li>
</ul>uj5u.com熱心網友回復：
根據您的問題，您似乎希望將這些專案放在一行中，但在我給出解決方案之前，我需要解釋發生了什么。
當一個元素，即DIV另一個元素的子元素，即LI它的范圍在該父元素內時，因此應用于它的任何樣式都將在該父元素的范圍內，并且只會影響具有該父元素的該元素，僅此而已，除非您正在使用影響所有孩子、兄弟姐妹等的風格變化的選擇器。例如，默認情況下，每個DIV元素都將其displayCSS 屬性設定block為例如，請參見下面的代碼
{
display: 'block'
}
因此，現在在您的情況下，您有一個串列元素，在一個無序串列元素內，LI您創建的每個元素都將有一個默認填充，并顯示blockso 以確保它們都落在同一行或按照您的問題中所述行內，您將需要將 display 屬性更改為inlineor ，如果您希望它具有彈性框的屬性并且仍然保持行內到父元素inline-flex，則只能使用大多數情況。inline-flex
因此，為了實作您想要做的事情，我建議您洗掉填充，現在將其設定為 0，然后將顯示屬性設定為“行內”，然后再次添加填充，以便為每個元素提供足夠的間距，直到您獲得您想要的外觀或設計。如有任何問題，請在此處發表評論。
uj5u.com熱心網友回復：
嘗試 ：
ul {
display: inline-flex;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/454946.html