html 換行<li><span></span><span></span></li>

Question

使用下面的代碼，我認為文本會在其容器內換行，但文本會換行到行的開頭。

如何讓文本包裹在它自己的容器中？

謝謝

 .recsubsection { font-weight: bold; font-size: 16px; text-align: left; margin-top: 0px; margin-bottom: 0px; /*text-shadow: 1px 1px #0000FF;*/ } .recquantity { float: left; width: 20%; } .recdescript { /*float: left;*/ width: 75%; }

 <li class="recsubsection"> <span class="recquantity">1 Kg</span> <span class="recdescript"> Apples, 2/3 Spies, 1/3 Empires, peeled, cut into 1 cm pieces, lightly Salted, add 1 Lime Juice, mix well, cover, set aside for 1 hour </span> </li>

Answer 1

您也許可以使用 flex-box 並將下一行添加到 CSS 代碼中的 recsubsection 選擇器：

display: flex;

通過這種方式，您可以將每個跨度包裝在其自己的容器中。 （您還應該更改 HTML 代碼並使用更具語義意義的標簽）

Answer 2

而是float嘗試flex ：

 .recsubsection { display: flex; font-weight: bold; font-size: 16px; } .recquantity { width: 25%;}

 <li class="recsubsection"> <span class="recquantity">1 Kg</span> <span class="recdescript"> Apples, 2/3 Spies, 1/3 Empires, peeled, cut into 1 cm pieces, lightly Salted, add 1 Lime Juice, mix well, cover, set aside for 1 hour </span> </li>

Answer 3

<span>不是容器，它們是將樣式應用於內聯文本的標簽，它們不會創建新的 DOM 元素。 您需要使用具有容器功能的元素或設置元素的樣式以使其具有這種行為。

在這里，我將您的<span>標簽更改為<div>標簽，並將 flexbox 應用到<li>以獲得您想要的流程。

 .recsubsection { font-weight: bold; font-size: 16px; text-align: left; margin-top: 0px; margin-bottom: 0px; display: flex; } .recquantity { width: 20%; } .recdescript { width: 75%; }

 <li class="recsubsection"> <div class="recquantity">1 Kg</div> <div class="recdescript"> Apples, 2/3 Spies, 1/3 Empires, peeled, cut into 1 cm pieces, lightly Salted, add 1 Lime Juice, mix well, cover, set aside for 1 hour </div> </li>

Answer 4

li只是一個列表的一行，所以你可以有很多，但它們也應該放在有序列表或無序列表的標簽內...... ol和ul

<ul>
   <li>item one</li>
   <li>item two</li>
   <li>add the rest of your list</li>
</ul>