如何将边框底部应用于 DIV 的每一行，使其具有“横格纸”外观？答案

【问题标题】：How do I apply a border-bottom to each line of a DIV so it has "lined paper" look?如何将边框底部应用于 DIV 的每一行，使其具有“横格纸”外观？
【发布时间】：2012-01-25 04:02:14
【问题描述】：

我的代码：

div {
    border-bottom: 1px solid;
    display:inline;
}

<div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.
</div>

我想要“横格纸”的外观。到目前为止，只有带有文本的区域具有底部边框。是否可以让每个底部边框都为 DIV 的全宽（即使文本仅为线宽的一半或更小）？

演示：http://jsfiddle.net/dcV8Y/

想要的结果：

http://img853.imageshack.us/img853/5159/linedpaper.png

【问题讨论】：

我不会添加border-bottom，而是添加背景图像作为平铺。
能发个例子吗？
背景图片的问题是不同系统上的字体大小可能会略有不同，这会影响效果。那种或用户风格的内容会扼杀它。
这并不重要，因为实际上该技术将用于内嵌图像而不是文本。
也许通过添加一个具有 0 填充、0 边距和底部边框的 div 容器，尽管我可以想象有比这更好的解决方案。

标签： html css

【解决方案1】：

通常使用背景图片来创建行式页面。

div {
  background-image: url('http://i.imgur.com/H8dFf.png');
  line-height: 24px;
  background-position: 0 -5px;
}

这里是一个例子：http://jsfiddle.net/HvKVr/

我通过截取 LibreOffice Draw 的屏幕截图来创建图像，从中剪切出一个方形单元格，在图像中只看到单元格的底部边框，然后使用 GIMP 将图像的高度缩放到 24 像素。

在这个解决方案中，我将线条向上移动了 5 个像素，以便文本位于线条上。如果您不希望文本位于行上，而是希望它位于行之间，则可以省略 background-position 属性。示例：http://jsfiddle.net/zuHn4/

【讨论】：

【解决方案2】：

为什么不是一个简单的 TABLE，它有 n 行，只有一个固定宽度的列和 CSS 属性 border:thin; 和 valign:center;？

【讨论】：

如何将文本分散到不同的行？怎么提前知道n的值？
表格只能用于表格数据，这不是