html - 如何将底部边框应用于 DIV 的每一行，使其具有 "lined paper"外观？

Question

我的代码:

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

Answer 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/