Question

我用Adobe XD创建了自己的设计，并希望用CSS代码实现它。如何自定义<hr>元素的大小？

这是我尝试过的：

.line1 {
    border: 1px solid #5B5B5F;
}

.line2 {
    border: 1px solid #5B5B5F;
}

.line3 {
    border: 1px solid #5B5B5F;
}

<div id="line1"><hr /></div>
<div id="line2"><hr /></div>
<div id="line3"><hr /></div>

预期结果的示例。

https://i.stack.imgur.com/2lmZ3.png

请问我可以提供更好的解决方案吗？

Answer 1

您必须将border设置为无，将margin设置为0，然后才能设置样式。

要更改他的颜色，您可以轻松更改background-color属性。
要更改他的身高，您可以编辑height属性。
要更改他的宽度，您可以编辑width属性。

一个例子：

.divider {
    border: none;
    height: 1px;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.12);
}

<hr class="divider"/>

Answer 2

HR标签默认情况下使用margin: auto对齐到中心。这可以通过与%一起玩来起作用。请注意，我已将id替换为class。

div hr{
  border: 1px solid #5B5B5F;
  text-align: left;
  margin: 2px 0;
}
.line-1 {
  width: 50%;
}
.line-2 {
  width: 75%;
}
.line-3 {
  width: 100%;
}

<div>
  <h1>Upcoming Titles</h1>
  <hr class="line-1"/>
  <hr class="line-2"/>
  <hr class="line-3" />
</div>

Answer 3

div hr{
  border: 2px solid #000000;
}

是否有任何CSS代码可自定义<hr> HTML元素的大小？

3 个答案: