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

只需在您的代码中将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 2

使用标签。这样比较容易。

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

Answer 3

如果要使用代码样式。尝试一下，效果很好。

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

Answer 4

您不应该手动执行此操作。使用<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 />

Answer 5

您可以使用水平尺<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。否则，在无法正常使用的情况下边框将被隐藏。请注意，显示屏上的最小测量单位为1像素。其他一切或多或少都是不可预测的，只要考虑不同的硬件，屏幕分辨率或不同的浏览器即可。因此，请遵循一些最佳做法和复杂的标准。

行无法正确打印

5 个答案: