0

ここで質問です。私は顧客向けにニュースレターを発行していますが、これは郵便はがきのようなものです。

レイアウトを線で書いているように見せたい

私がやろうとしていることを達成するのを手伝ってくれる人はいますか? 各文の長さが分からないため、テキストを TD タグに入れることができません。

さらに情報が必要な場合はお知らせください。

ありがとう ：）

4

7 に答える 7

8

クライアントが印刷物にメモ セクションを「必要とする」というこの問題に遭遇しました。ユーザーが入力したメモのテキストには、らせん綴じの紙のように下線が引かれています。(理由を尋ねるのをやめることを学びました。) 背景画像を使用しなかったのはなぜですか? 印刷されないため、オプションではありません。

構造は次のとおりです (わかりやすくするために ID を使用)。

<p id = "p">
    <span id = "span1">
        <span id = "span2">
            sadfa sdfhkas dfjkahsd fhjklasdg f askjldfh jklas djklfh aljks hfjkl hasjdklfg hjlashdjlfgh jlkashdjkl gfhloashdfgh jkladshjkgl haskl dhfiu hajkl fghuasbhfljbahuk bfkljabwehrf bajkls bflaskdjf ljakdfk
        </span>
    </span>
</p>

次のスタイルが適用されます。

#p {
    border-bottom: 1px solid black;
    text-align: justify;
}
#span1 {
    display: block;
    margin-bottom: -1px;
}
#span2 {
    border-bottom: 1px solid black;
}

ここから始めましょう...

#span2罫線用紙の外観の大部分を作成するために、下の境界線が与えられます。ただし、ここで停止すると、問題が発生します。前述のように、線が右マージンまで伸びていません。この問題については、すぐに説明します。

#span1、 #span2 をラップすることで、この短すぎる線の問題を 50% 解決できます。ブロックの表示プロパティを指定しました。これにより、-1px の下余白を適用でき、#span2#span1 の下端で の最後の張り出した行を効果的に「覆う」ことができます。これの効果は、私たちが到達するまであまり価値がありません...

#pここで、#span1 に適用したスタイルが効果を発揮します。まず、text-align: justify右マージンに到達するほとんどの下部境界線を処理します。もちろん、最後の行を除いて、これは本当に場違いに見えます。これを処理するために、ブロック スタイルの -1px の下マージンのために、最後の短い下の境界線に重なるものに適用し、錯覚を完成させますborder-bottom: 1px solid black。#p#span1

はい、それは一種の不器用ですが、問題が発生し、クライアントの要求を調整できない場合は、不注意が必要になることがあります.

(注: これが電子メールの書式設定で機能するとは思わないでしょう... 前に言ったように、印刷されたページで罫線入りの紙の外観を模倣するために必要なものです。)

于 2012-12-06T17:27:25.470 に答える
3

私が間違っていない限り、次のようなものが必要です。

http://jsfiddle.net/eB6tY/

CSS:

#postcard .line
{
    width: 100%;
    border-bottom: 1px solid #000;
}

HTML:

<div id="postcard">
    <div class="line">Line 1</div>
    <div class="line">Line 2</div>
    <div class="line">Line 3</div>
</div>
于 2011-04-04T17:28:37.800 に答える
2

下線を引く必要がある行に style="border-bottom: 1px solid #000" を追加します (おそらく、含まれている td に)

于 2011-04-04T17:26:38.900 に答える
1

多分私は要点を逃していますが、あなたはできませんでした

<u> my text here </u>
于 2011-04-04T17:28:31.003 に答える
0

関連するセレクターとして DIV を仮定する 

div{text-decoration:underline}

またはこれを電子メールで送信している場合はインライン...

<div style='text-decoration:underline'>
于 2011-04-04T17:28:44.700 に答える
0

テキストの 1 行分の高さ (+ margin-bottom) で幅が 1 ピクセルの背景画像を使用できます。コンテンツは「透明に加えて、線が行くべき場所のドット」になります...

于 2011-04-04T17:30:06.900 に答える