如何将边框底部应用于DIV的每一行，因此它具有“内衬纸”看？ [英] How do I apply a border-bottom to each line of a DIV so it has "lined paper" look?

问题描述

我的代码：

  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的全宽（即使文本只是行宽的一半或更少）？

演示：

我通过拍摄LibreOffice的截图创建了图像从其中绘制，剪切一个方形单元格，只有图像中可见的单元格的底部边框，并使用GIMP将图像的高度缩放到24像素。

解决方案，我已经移动了5像素向上，使文本坐在行。如果你不想让文本坐在行上，而是希望它们在它们之间，你可以省略 background-position 属性。示例： http://jsfiddle.net/zuHn4/

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)?

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

Desired result:

解决方案

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/

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.

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/

这篇关于如何将边框底部应用于DIV的每一行，因此它具有“内衬纸”看？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！