如何在DIV的每一行应用边框底部，使其具有“衬纸”外观？

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将图像的高度缩放到24px。

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

Answer 2

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