css 样式两端对齐

CSS样式中的两端对齐让页面元素在左右两侧对齐，增强了页面的可视性和美观性。下面介绍两种样式实现方法。

方法一：使用display:table和 display:table-cell 属性

.container {
    display: table;
    width: 100%;
}
.item {
    display: table-cell;
    text-align: justify;
}

以上代码中，.container 作为父级元素采用 display: table 来使用类似表格的布局方式。.item 作为子元素采用 display: table-cell 来使其变成一格。同时，子元素的文本采用 text-align: justify 属性实现两端对齐。

方法二：使用flex布局方式

.container {
    display: flex;
    justify-content: space-between;
}
.item {
    flex-basis: 30%;
 /*子元素的宽度占比*/}

以上代码中，.container 采用 display: flex 属性进行布局，justify-content: space-between 实现子元素在左右两边分别对齐。.item 作为子元素需要指定一个宽度占比，使用 flex-basis 属性进行设置。以下为兼容性代码：

.container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.item {
    width: 30%;
 /*兼容性代码采用width属性*/}
    

以上两种方法均可实现 CSS 样式的两端对齐，具体使用需根据实际情况选择适合的方法。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！