线无法正确打印

Question

我想在每个锚链接后打印一行。

我使用div定义行属性的样式。但它并不是在每个链接后打印，而是打印替代链接。

HTML代码非常简单，没有任何复杂，但仍然提供错误的输出。每个链接后我都需要一行。

<a href='#'>Movie 1</a><br>
<div style='width: 100%;border-bottom: 0.5px solid black;'></div>
<a href='#'>Movie 2</a><br>
<div style='width: 100%;border-bottom: 0.5px solid black;'></div>
<a href='#'>Movie 3</a><br>
<div style='width: 100%;border-bottom: 0.5px solid black;'></div>
<a href='#'>Movie 4</a><br>
<div style='width: 100%;border-bottom: 0.5px solid black;'></div>
<a href='#'>Movie 5</a><br>
<div style='width: 100%;border-bottom: 0.5px solid black;'></div>
<a href='#'>Movie 6</a><br>
<div style='width: 100%;border-bottom: 0.5px solid black;'></div>
<a href='#'>Movie 7</a><br>
<div style='width: 100%;border-bottom: 0.5px solid black;'></div>

代码链接：http://jsfiddle.net/64cfuvL1/

Answer 1

您可以使用<hr>，水平标尺，但这不是代码中的问题。

您的代码有问题，因为您使用浮动作为边框宽度。

<a href='#'>Movie 1</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 2</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 3</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 4</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 5</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 6</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 7</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>

将浮动0.5px更改为最小1px。否则边界将隐藏在未经处理的情况下。请注意，显示屏上的最小测量单位为1px。其他一切或多或少都是不可预测的，只要考虑不同的硬件，屏幕分辨率或只是不同的浏览器。因此，请坚持一些最佳实践和复杂的标准。

Answer 2

只需在代码中将0.5px更改为1px即可。

小于1px的值可能没有显示任何内容，因为您的屏幕可以显示的最小单位是1px

有关小于像素厚的边框的更多信息，请参阅this answer。

<a href='#'>Movie 1</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 2</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 3</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 4</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 5</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 6</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>
<a href='#'>Movie 7</a><br>
<div style='width: 100%;border-bottom: 1px solid black;'></div>

另一种解决方案是使用<hr>创建水平线。

hr {
  margin-top: 0px;
  margin-bottom: 0px;
}

<a href='#'>Movie 1</a><br>
<hr>
<a href='#'>Movie 2</a><br>
<hr>
<a href='#'>Movie 3</a><br>
<hr>
<a href='#'>Movie 4</a><br>
<hr>
<a href='#'>Movie 5</a><br>
<hr>
<a href='#'>Movie 6</a><br>
<hr>
<a href='#'>Movie 7</a><br>
<hr>

另一个解决方案是使用::after伪类添加一行：

.border-bottom::after {
  content: '';
  display: block;
  width: 100%;
  border-bottom: 1px solid black;
  margin-bottom: -17px;
}

<a href='#' class="border-bottom">Movie 1</a><br>
<a href='#' class="border-bottom">Movie 2</a><br>
<a href='#' class="border-bottom">Movie 3</a><br>
<a href='#' class="border-bottom">Movie 4</a><br>
<a href='#' class="border-bottom">Movie 5</a><br>
<a href='#' class="border-bottom">Movie 6</a><br>
<a href='#' class="border-bottom">Movie 7</a><br>

Answer 3

使用标签。这更容易。

<p>Your Text 1</p>
<hr>
<p>Your Text 2</p>

Answer 4

如果你想使用你的代码风格。试试这个工作正常。

<div style='width: 100%;border: 0.5px solid black;'></div

Answer 5

你不应该手动这样做。使用<hr />标签。

HTML <hr>元素表示段落级元素之间的主题中断：例如，故事中场景的更改，或者节中主题的移位。

资料来源：MDN

<a href='#'>Movie 1</a>
<hr />

<a href='#'>Movie 2</a>
<hr />

<a href='#'>Movie 3</a>
<hr />

<a href='#'>Movie 4</a>
<hr />

<a href='#'>Movie 5</a>
<hr />

<a href='#'>Movie 6</a>
<hr />

<a href='#'>Movie 7</a>
<hr />