在 IE/Edge 中将 <HR> 向右对齐

Question

尝试将此页面上的一些<hr>元素向右对齐。在 IE/Edge 中，<hr>元素在每种情况下都左对齐。

我在用<hr class="hr-right">

.hr-right {
  text-align: right;
  margin-right: 0;
}

我尝试使用浮动和清除，但最终显示<hr>为段落内的浮动图像。

Answer 1

如果您希望元素在 Flex 容器中右对齐，请使用：

margin-left: auto

不是

margin-right: 0;

Flex 自动边距通过消耗所有可用的可用空间来工作。

因此margin-left: auto将消耗项目左侧的所有空间，将其固定到右边缘。

更多详细信息请参见此处：

• 在CSS Flexbox中，为什么没有“justify-items”和“justify-self”属性？