将元素用css横向排列

可以使用 `display: inline-block` 或 `float: left` 来实现元素的横向排列。

使用 `display: inline-block` 可以将元素变成行内块级元素，然后通过设置宽度、高度、边距等属性来控制它们在横向方向上的排列。例如：

.container {
  font-size: 0; /* 去除空格 */
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-right: 10px;
  background-color: #ccc;
}

这段代码将一个容器元素的字体大小设置为 0，以去除元素之间的空格。然后将每个元素设置为行内块级元素，宽度和高度为 100px，之间留有 10px 的间距，背景色为灰色。

使用 `float: left` 可以将元素浮动到左侧，然后通过设置宽度、高度、边距等属性来控制它们在横向方向上的排列。例如：

.box {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 10px;
  background-color: #ccc;
}

这段代码将每个元素设置为浮动到左侧，宽度和高度为 100px，之间留有 10px 的间距，背景色为灰色。

需要注意的是，使用 `display: inline-block` 或 `float: left` 时，需要注意元素之间的空格或换行符号会影响元素之间的间距。可以通过将容器元素的字体大小设置为 0 或使用 flex 布局等方式来解决这个问题。