2012-01-24 19 views
2

私のコード:私はしたいDIVの各行にボーダーボトムを適用して、「紙の線」のように見えるようにするにはどうすればよいですか?

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

+4

私は 'border-bottom'を追加しませんでした。代わりに背景画像をタイルとして追加します。 – locrizak

+0

例を投稿できますか? – vxl

+0

バックグラウンドイメージの問題は、異なるシステム上のフォントのサイズが多少異なることが原因で、その効果が消えてしまうことです。そのような、またはユーザーが書いたコンテンツはそれを殺すでしょう。 – j08691

答えて

2

裏地-ページは通常、背景画像を使用して作成されます。ここ

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

は一例であり:http://jsfiddle.net/HvKVr/

I画像及びスケーリングにおける表示セルの底部のみ境界とそれから正方形セルの切断、LibreOfficeのドローのスクリーンショットを撮影して画像を作成しましたGIMPを使用して画像の高さを24pxにします。

この解決策では、行を5ピクセル上に移動して、テキストがその行に配置されるようにしました。テキストを線の上に置くのではなく、線の間に配置する場合は、background-positionプロパティを省略できます。例:http://jsfiddle.net/zuHn4/

+0

ありがとう!完璧なソリューション! – vxl

-3

なぜなら、n行と1つの固定幅の列とCSSプロパティborder:thin;valign:center;の単純なTABLEはありません。

+0

テキストを異なる行にどのように広げますか?あなたはどのようにnの価値を事前に知っていますか? –

+0

なぜ、テーブルですか? – BoltClock

+0

表は表形式のデータにのみ使用してください。これは – ChrisW

関連する問題