[分享]css两个标签固定在一行

使用CSS将两个标签固定在一行非常简单。只需将它们设置为inlineblock，它们就会在同一行中。让我们看一下下面的示例代码： html { fontsize: 16px; } .containe...

使用CSS将两个标签固定在一行非常简单。只需将它们设置为inline-block，它们就会在同一行中。让我们看一下下面的示例代码：

html {
    font-size: 16px;
}
<br>
.container {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}
<br>
.box {
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: #f2f2f2;
    margin: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 20px #d9d9d9;
    text-align: center;
    vertical-align: top;
} 

在这个例子中, 我们使用了一个.container类，它是一个包含两个.box元素的容器。我们设置了.container类的宽度为100％并最大宽度为960像素。这意味着它将填满其父元素并且不会超过960像素的宽度。
.box元素是具体元素，我们设置它的display属性为inline-block，这将使它们在同一行上。我们也设置它们的宽度和高度为200像素，并在它们周围设置20像素的边距。我们还添加了一些其他属性来使它们看起来更好看，比如圆角和盒子阴影等等。
使用上述代码，两个.box元素将始终在同一行中。所以假设我们再在.container中添加另外一个.box元素，那么它将被放置到第二行中。因此，通过设置元素的display属性为inline-block，我们可以轻松地将它们固定在同一行中。