css横向排列

作者：傲世，小狂徒发布日期:2025-12-18 浏览:28

<!DOCTYPE html>
<html>
<head>
<style>
/* 使用 flexbox 实现横向排列 */
.container {
  display: flex;
  /* 子元素之间平均分布 */
  justify-content: space-between;
}

/* 设置子元素的样式 */
.item {
  padding: 10px;
  margin: 5px;
  background-color: lightblue;
  border: 1px solid blue;
}
</style>
</head>
<body>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

</body>
</html>

解释说明：

.container 使用了 display: flex;，这使得它的子元素（.item）会默认在主轴（水平方向）上排列。
justify-content: space-between; 让子元素在容器内均匀分布，两端对齐。
每个 .item 都有基本的样式，如背景颜色、边框等，方便观察效果。

如果你需要其他布局方式或有更多需求，请告诉我！

上一篇：css tooltip

下一篇：css position 居中