css - 单行显示的 span 元素

Question

我已经在 div 中制作了 span 元素。

<div id="maindiv" style="max-width: 50%;margin: auto;">
<span id="span1">span1</span>
<span id="span2">span2</span>
<span id="span3">span3</span>
<span id="span4">span4</span>
<span id="span5">span5</span>
<span id="span6">span6</span>
<span id="span7">span7</span>
<span id="span8">span8</span>
<span id="span9">span9</span>
<span id="span10">span10</span>
<span id="span11">span11</span>
<span id="span12">span12</span>
<span id="span13">span13</span>
<span id="span14">span14</span>
<span id="span15">span15</span>
<span id="span16">span16</span>
<span id="span17">span17</span>
<span id="span18">span18</span>
<span id="span19">span19</span>
<span id="span20">span20</span>

问题是中心的 div 但跨度显示在单行而不是第二行，如 wrap-word.scroll 显示在水平

Answer 1

span 是行内元素，难怪。如果你想要他们在 diff 中。行，使用 HTML block 级元素(div 或 p)或者在 #maindiv 上使用 flexbox

#maindiv{
  display: flex;
  flex-direction: column;
}