用css怎么实现两端对齐？

CSS 中实现两端对齐有多种方法，选择哪种取决于你的具体需求和HTML结构。以下列出几种常见方法以及它们的优缺点：

1. text-align: justify;

这是最常用的方法，适用于文本内容的两端对齐。

• 优点：简单易用，浏览器兼容性好。
• 缺点：
  • 对最后一行无效（除非是单行文本）。
  • 中英文混排时，可能会出现单词间距过大的问题。
  • 对包含浮动元素或绝对定位元素的行可能不起作用。

.justify {
  text-align: justify;
}

2. text-align-last: justify;

这个属性可以控制最后一行文本的对齐方式。

• 优点：可以解决text-align: justify;对最后一行无效的问题。
• 缺点：浏览器兼容性不如text-align: justify;好，尤其是在较旧的浏览器中。

.justify-last {
  text-align: justify;
  text-align-last: justify;
}

3. text-justify: inter-word; / text-justify: distribute;

text-justify属性配合不同的值可以更精细地控制两端对齐的效果，主要用于处理中英文混排的场景。

• inter-word：通过调整单词间的间距来实现两端对齐。

• distribute：通过调整字距、字母间距以及单词间距来实现两端对齐，效果更均匀，但浏览器支持有限。

• 优点：可以更好地处理中英文混排的情况。

• 缺点：浏览器兼容性较差，尤其distribute。

.justify-inter-word {
  text-align: justify;
  text-justify: inter-word; /* 适用于IE */
}

.justify-distribute {
  text-align: justify;
  text-justify: distribute; /* 其他浏览器 */
}

4. 使用伪元素::after

这种方法通过在元素末尾添加一个宽度为100%的不可见字符来强制最后一行文本进行两端对齐。

• 优点：兼容性好，可以解决最后一行不对齐的问题。
• 缺点：需要添加额外的HTML元素，略微增加代码复杂度。

.justify-pseudo {
  text-align: justify;
}
.justify-pseudo::after {
  content: '';
  display: inline-block;
  width: 100%;
}

5. flexbox 布局

如果你的元素使用 flexbox 布局，可以使用 justify-content: space-between; 来实现两端对齐。

• 优点：适用于 flex 布局的元素，控制灵活。
• 缺点：只适用于单行文本。

.justify-flex {
  display: flex;
  justify-content: space-between;
}

选择哪种方法？

• 对于简单的文本段落，text-align: justify; 通常足够。
• 如果需要控制最后一行，可以结合 text-align-last: justify;。
• 对于中英文混排，可以尝试 text-justify，但要注意兼容性。
• 对于兼容性要求高的场景，伪元素方法是一个不错的选择。
• 对于单行文本且使用 flexbox 布局的场景，justify-content: space-between; 是最佳选择。

建议根据实际情况选择最合适的方法，并进行充分的测试以确保在不同浏览器上的兼容性。