Question

我一直喜欢<hr>标签作为设计分隔符，因为它是一个简洁的空标签，您可以使用CSS来设计主题。我喜欢它比border-bottom更好，因为你可以设置宽度小于它上面的内容，即容器宽度的25％。

我几乎觉得应该有一个空标签作为css设计的锚点。

我知道我可以用任何带有CSS的标签来做到这一点： <div class=divider></div>

工作正常，但不像<hr>

那么简洁

所以对我来说<hr>似乎是表面上的最佳选择。

然后我读了<hr>的HTML5语义，它说这是一个主题突破。（这似乎有点武断）标题是一个与其内容不同的主题？那些我希望在帖子上有一个精美标题的语义案例，标题在顶部，分隔符和下面的子标题下有一个漂亮的框？

我希望我的内容对联合有意义，我希望它看起来不错，如果它是在另一个css喜欢读者的游戏中打开，再次似乎说<hr>不是一个好的选择。

我应该使用看似浪费的<span class=divider></span>吗？我也考虑了<svg>或<br>，但对我来说<br>似乎是一个空行，并且在语义上也可能像句子中的逗号一样暂停。当主要原因是设计偏好而不是主题突破时，在语义上使用水平分隔符的最佳方法是什么？

Answer 1

我认为出于你的建议，我会继续使用单独的自定义div <div class="box-divider"></div>如果它是你结构中不可或缺的一部分并且在你的分隔器方面给你最大的灵活性那真的不是那么浪费会看起来像和定位。你可以诚实地对<hr>标签做同样的事情，如果你自定义它的css你可以让它看起来你想要的。

许多用户评论过在需要分隔符的元素上使用psuedo元素，这是一个很好的建议。

.box {
    position: relative;
}

.box:after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: green;
}

如果它像边界线一样简单，你可以使用border-bottom: 1px solid black;例如元素本身，并且放弃了对一个单独元素的需求。添加一些填充底部来控制定位。

总而言之，如果你需要一个棘手/自定义的分隔符，我会选择单独的div divider或伪元素。

我应该如何制作一个不一定代表主题中断的分隔符<hr /> vs <span>，<div>，css等

1 个答案: