在开发网页过程中，我们通常会使用CSS来控制HTML元素的样式。其中，排列是一个常见的问题。在本文中，我们将学习如何使用CSS将三个
元素水平排列。
<style>
.container {
display: flex; /* 声明 flex 布局 */
}
.item {
width: 100px;
height: 100px;
margin-right: 10px; /* 设置元素间距 */
background-color: #f00;
}
.item:last-child {
margin-right: 0; /* 设置最后一个元素的间距为 0 */
}
</style>
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
如上代码所示，我们使用了flex布局来实现元素的水平排列。容器元素的display属性被设置为flex，它的子元素们（.item）就成为了flex子项。
每个子项的宽度为100px，高度为100px。它们之间有10px的空白间距，为了不让最后一个元素多出来一点间距。我们使用了:last-child伪类来将最后一个元素的margin-right设置为0。
元素的水平排列问题。
相关文章
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
