css 两个span 换行

在 CSS 中，有时候我们需要让两个 span> 元素在同一行显示，但也有时候我们需要它们在不同行显示。那么如何让这两个 span> 元素换行呢？下面我们就来看看实现方式。

首先考虑让这两个 span> 元素在同一行显示。常见的实现方式是使用 display: inline-block; 属性，这样两个元素就可以在同一行显示了。代码如下：

span style="display: inline-block;
    ">
    第一个 span 元素/span>
    span style="display: inline-block;
    ">
    第二个 span 元素/span>
    

如果要让这两个 span> 元素在不同行显示，则可以使用 display: block; 属性。但这样会出现一个问题，就是两个元素之间会有一段空白间隔。如下所示：

span style="display: block;
    ">
    第一个 span 元素/span>
    span style="display: block;
    ">
    第二个 span 元素/span>
    

如果不想让两个元素之间有空白间隔，可以将它们的父元素的字体大小设置为 0，然后再单独给这两个元素设置字体大小。代码如下：

p style="font-size: 0;
    ">
      span style="display: block;
     font-size: 16px;
    ">
    第一个 span 元素/span>
      span style="display: block;
     font-size: 16px;
    ">
    第二个 span 元素/span>
    /p>
    

以上就是让两个 span> 元素换行的两种方法，具体应用根据实际需求进行选择。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！