如何将底部边框应用于 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/

我通过拍摄LibreOfficeDraw的屏幕截图创建了这张图像，从中剪切出一个方形单元格，只有单元格的底部边框在图像中可见，并使用GIMP将图像的高度缩放到24px。

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

Answer 2

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