Как применить нижнюю границу к каждой строке 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, резки квадратной ячейки от нее только с нижней границей ячейки видимой на изображении и масштабировании высота изображения до 24px с использованием GIMP.

В этом решении я сдвинул линии на 5 пикселей, чтобы текст сидел на линиях. Если вы не хотите, чтобы текст сидел на линиях, но вместо этого он должен находиться между ними, вы можете опустить свойство background-position. Пример: http://jsfiddle.net/zuHn4/

Answer 2

Почему нет простой таблицы с n строками и только одним столбцом с фиксированной шириной и свойствами CSS border:thin; и valign:center;?