span标签为什么不能换行

Span标签不能换行

1、遇到的问题介绍

​ 问题介绍：是在一个div标签中有两个标签， 然后想增加第三个标签，但是设想前两个标签一行，第三个标签一行。

<div class="detail-num">
   <span>测试1</span>	    
    <span>测试2</span>
    <span>这是测试</span>
</div>

2、解决办法

1、使用br标签

<div class="detail-num">
   <span>测试1</span>	    
    <span>测试2</span>
    <br/>
    <span>这是测试</span>
</div>

结果：没有用处，之前什么样，现在还啥样。

2、在span标签中加上style=“display:inline-block”，并且分成两个div

 <div class="detail-num">
    <span>测试1</span>         
     <span>测试2</span>
 </div>
 <div class="detail-num2">
    <span style="display:inline-block;">这是测试</span>
  </div>

结果：问题迎刃而解！！！

3、总结

• 遇到问题首先先看class中设置的css，比如我这里先看detail-num中设置的样式，里面可能会因为设置的display。
• span标记的样式设置了width属性，会发现不产生效果
• 如果设置display:block，width属性生效，但是此时的span跟div一样了。
• 如果设置display:inline-block，则span并列在同行，而且width属性生效。

display属性值

1	2
值	描述
none	此元素不会显示
block	此元素将显示为块级元素，此元素前后会带有换行符
inline	默认。此元素会被现实为内联元素，元素前后没有换行符
inline-block	行内块元素
list-item	此元素会作为列表显示