仅第一个<hr />不显示

Question

我遇到一个问题，就是我正在处理的页面上没有显示简单的<hr>，并且在摆弄这个问题的同时，我注意到以下内容：如果我在上面有多行<hr>标签该页面只有第一个不会显示，而其他则会显示。我已经尝试了多种组合。在我的浏览器的开发人员工具中，看不见的<hr>和不可见的 <div> <p>A</p> <hr> <p>B</p> <hr> <p>C</p> </div> 之间没有任何区别。

这里有一些示例代码：

<hr>

只有B和C之间的线可见。

有人知道是什么原因造成的吗？

顺便说一句：我正在使用Bootstrap 4，并且没有以任何方式更改CSS的hr { border-top: 5px solid black; } 标记。

编辑：

我添加了一些CSS来更改边框，这就是我得到的：

上面的线明显更细。 这是CSS：

<%= form_with(model: sale, local: true) do |f| %>
  <% if @sale.cost >= 4 %>
    <%= f.text_field :sale_1 %>
    <%= f.text_field :sale_2 %>
    <%= f.text_field :sale_3 %>
    <%= f.text_field :sale_4 %>
  <% if @sale.cost >= 6 %>
    <%= f.text_field :sale_5 %>
    <%= f.text_field :sale_6 %>
  <% if @sale.cost >= 8 %>
    <%= f.text_field :sale_7 %>
    <%= f.text_field :sale_8 %>
<% end %>
<% end %>
<% end %>

Answer 1

您忘记了标记的斜杠。这样做：

<div>
    <p>A</p>
    <hr/>
    <p>B</p>
    <hr/>
    <p>C</p>
</div>

Answer 2

您可以使用水平线的高度来设置精确值，但是它也可以使用边框。

hr{
    height: 3px;
    background-color: #000;
    border: none;
}

<div>   
   <p>A</p>
   <hr>
   <p>B</p>
   <hr>
   <p>C</p>
</div>