<HR> 在 IE/Edge 中右对齐

Question

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

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

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

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

Answer 1

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

margin-left: auto

没有

margin-right: 0;

Flex auto 利润通过消耗所有可用的免费 space。

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

此处有更多详细信息：

Align <HR> to right in IE/Edge