[分享]css不用浮动在一排

近些年来，CSS的应用越来越广泛，但有时我们会遇到在一排中排列多个元素的需求。虽然有一种比较流行的方式是使用浮动（float），但其实还有其他方法可以实现。 第一种方法是使用inlineblock。当...

近些年来，CSS的应用越来越广泛，但有时我们会遇到在一排中排列多个元素的需求。虽然有一种比较流行的方式是使用浮动（float），但其实还有其他方法可以实现。
第一种方法是使用inline-block。当我们将元素设置为inline-block时，它们将像inline元素一样排列，但同时又像block元素一样具有宽度、高度和边距属性。例如：

p {
  font-size: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}
<br>
p span {
  display: inline-block;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #333;
  margin: 10px;
} 

在这个例子中，我们设置了p元素的字体大小为0，去除了文本间的空格，使所有inline元素之间的空格消失。然后，我们将每个span元素设置为inline-block，让它们像inline元素一样排列，同时又可以具有宽度、高度和边距属性。
第二种方法是使用flexbox。Flexbox是CSS3中新增的一种布局模式，它可以让我们更轻松地控制元素的位置和大小。例如：

.container {
  display: flex;
  justify-content: space-between;
}
<br>
.item {
  width: 100px;
  height: 100px;
  background-color: #333;
  margin: 10px;
} 

在这个例子中，我们将父元素设置为flex-container，子元素设置为flex-item。通过设置父元素的justify-content属性，我们可以控制各个子元素的位置。而通过设置子元素的宽度、高度和边距属性，我们可以控制它们的大小和间距。
总的来说，虽然浮动是一种常见的排列元素的方法，但是并不是唯一的方式。inline-block和flexbox都可以实现相同的效果，并且更加灵活，让我们更加方便地控制元素的位置和大小。