[分享]css两个span水平放置

在网页开发中，有时候需要将两个元素横向排列，这时候就需要使用CSS来实现。下面是一种简单的方法： 这里我们使用了元素，并将其设为inlineblock，这样它们就可以横向排列。同时，我们还给每个元素...

在网页开发中，有时候需要将两个元素横向排列，这时候就需要使用CSS来实现。下面是一种简单的方法：

<span style="display: inline-block; width: 50px; height: 50px; background-color: red;"></span>
<span style="display: inline-block; width: 50px; height: 50px; background-color: blue;"></span> 

这里我们使用了元素，并将其设为inline-block，这样它们就可以横向排列。同时，我们还给每个元素设置了宽度和高度，以及背景颜色。

这个方法比较简单，但是有一个缺点，就是如果我们想让这两个元素之间有一些间距，就比较麻烦。不过，我们可以通过一些其他的方法来实现这个效果。

比如，我们可以使用float来让这两个元素横向排列：

<span style="float: left; width: 50px; height: 50px; background-color: red;"></span>
<span style="float: left; width: 50px; height: 50px; background-color: blue;"></span> 

这里，我们使用了float:left，将第一个元素向左浮动，第二个元素自动填充其后面的空间。这样，我们就可以很方便地给它们之间添加一些间距：

<span style="float: left; margin-right: 10px; width: 50px; height: 50px; background-color: red;"></span>
<span style="float: left; width: 50px; height: 50px; background-color: blue;"></span> 

这里，我们给第一个元素添加了一个margin-right属性，使其右边与第二个元素有一些间距。

通过上面的方法，我们可以在网页中轻松实现将两个元素横向排列的效果。