[分享]css内容显示在一行

在前端开发中，CSS样式是不可缺少的一部分。而在CSS中，有一种常见的需求就是让一些内容显示在同一行，这可以通过一些CSS属性来实现。首先我们来看一下`display`属性。默认情况下，`displa...

在前端开发中，CSS样式是不可缺少的一部分。而在CSS中，有一种常见的需求就是让一些内容显示在同一行，这可以通过一些CSS属性来实现。
首先我们来看一下`display`属性。默认情况下，`display`属性的值为`block`，即每个标签都会独占一行。如果我们想要让两个标签在同一行显示，可以将它们的`display`属性设置为`inline`或者`inline-block`。
例如，我们在一个段落中想让一些文字变为粗体并且显示在同一行：

<p>
  这是一段普通的文字，
  <span style="display: inline-block; font-weight: bold;">它变成了粗体并且和前面的文字在同一行显示</span>。
</p> 

<style>
  .box {
    width: 50px;
    height: 50px;
    background-color: #f00;
  }
  .left {
    float: left;
  }
</style>
<div class="left box"></div>
<div class="box"></div>