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代码中将下一行添加到rec分段选择器:

display: flex;

这种方式将每个span包装在自己的容器中。(你也应该改变你的HTML代码和使用更多的语义上有意义的标签)

Answer 2

代替floattry 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>标签，并将flexx应用于<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>