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

<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 2

您也许可以使用flex-box并在CSS代码中添加下一行以重新划分选择器：

display: flex;

这样，您可以将每个跨度包装在其自己的容器中。(您还应该更改HTML代码，并使用更具语义意义的标记)

Answer 3

相反，请尝试flex float

​

.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>

​