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标记中写css，如

span{
  display:block;
}

Answer 2

span是一个内联元素，难怪。如果你想要他们在dif。行，使用HTML块级元素，（div或p）或者在#maindiv

上使用flexbox

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

Answer 3

尝试使用：

span{
      display:inline;
    }