<hr> 可以嵌套在样式表中吗答案

【问题标题】：Can <hr> be nested in Stylesheet<hr> 可以嵌套在样式表中吗
【发布时间】：2017-06-01 02:59:12
【问题描述】：

我想要在浮动图像下方设置一条简单的分界线。

我的样式表是这样写的：

img.floatrightclear {
    float: right;
    clear: right;
    margin-top: 10px;
    margin-left: 20px;
    margin-bottom: 20px;
}

是否可以在图像下方以与图像相同的宽度显示彩色线条？可以包含在图片css中吗？

【问题讨论】：

你可以在 CSS 中设置
的样式。例如：codepen.io/ibrahimjabbari/pen/ozinB
你可以使用border。
添加 padding-bottom 和 border-bottom 以在图像下方一定距离处显示边框。
如果你只需要线条来拉伸图像的宽度，那么你可以使用别人提到的边框技巧。如果您需要线条在屏幕上进一步延伸，则需要单独使用<hr> 元素。

标签： html css image

【解决方案1】：

在底部使用一些填充，然后仅在底部应用边框

padding-bottom:50px;
border-bottom:1px solid #ddd; /*Whatever color code you wanted the <hr> to be

https://jsfiddle.net/h57dfcmt/

【讨论】：

【解决方案2】：

正如 Nawed Khan 所说，只需使用边框底部和填充底部，如下所示：

img.floatrightclear {
  float: right;
  clear: right;
  margin-top: 10px;
  margin-left: 20px;
  margin-bottom: 20px;

  padding-bottom: 10px; /* the distance between bottom and line */
  border-bottom: 2px solid black; /* The line */
}

【讨论】：