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

My code:

我的代码：

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>

I want to have "lined paper" look. By now only area with text has bottom border. Is it possible to have every bottom border to be at full width of DIV (even if text is only half or less of line width)?

我想要“衬纸”的样子。到目前为止，只有带文字的区域有底边框。是否可以将每个底部边框设置为DIV的全宽（即使文本只是线宽的一半或更小）？

Demo: http://jsfiddle.net/dcV8Y/

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

Desired result:

期望的结果：

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

2 个解决方案

#1

Lined-pages are usually created using a background image.

内衬页面通常使用背景图像创建。

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

Here is an example: http://jsfiddle.net/HvKVr/

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

I created the image by taking a screenshot of LibreOffice Draw, cutting of a square cell from it with only the bottom border of the cell visible in the image and scaling the height of the image to 24px using GIMP.

我通过截取LibreOffice Draw的截图来创建图像，从中切割出一个方形单元格，只有图像中可见单元格的底部边框，并使用GIMP将图像的高度缩放到24px。

In this solution, I've shifted the lines 5 pixels up so that the text sits on the lines. If you do not want the text to sit on the lines but instead want it to be between them, you can omit the background-position property. Example: http://jsfiddle.net/zuHn4/

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

#2

-3

Why not a simple TABLE with n rows and just one fixed width column and CSS properties border:thin; and valign:center;?

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

#1