css使三个元素在一行上

在web开发中，经常需要将多个元素排列在同一行。这时候，就需要使用css来实现这个效果。下面我们来看一下如何使用css来使三个元素在一行上。

//HTML代码
<div class="container">
  <div class="element">元素1</div>
  <div class="element">元素2</div>
  <div class="element">元素3</div>
</div>

//css代码
.container{
  display: flex;  //将容器设置为flex布局
}

.element{
  flex: 1;  //元素自适应宽度
  margin-right: 10px;  //设置元素之间的距离
}

css使三个元素在一行上

我们先在html中创建一个

容器，并在里面放置三个

元素。接着，在css中给容器设置display:flex，将容器设置为flex布局。这样，子元素就可以自动排列在同一行上了。

接下来，我们给每个元素设置flex:1，表示元素自适应宽度。同时，给元素之间增加一定的距离，这里我们设置margin-right:10px。

最后，就可以看到三个元素已经成功地排列在同一行上了。如果需要排列更多的元素，在html中增加元素即可，不需要修改css代码。

上一篇：css图片外围怎么加边框下一篇：css3新增了哪些关系选择器

css使三个元素在一行上

相关文章