1

この例のように、インデントに数行のテキストを書きたい (HTML のみ): HERE

そして、以下は私が試したものです：

<p><code>"Knowing is not enough. We</code></p>
<p><blockquote><code>must apply. Willing is not</code></blockquote></p>
<p><blockquote><pre><code>enough. We must do."</code></pre></blockquote></p>

そして、それは機能しません。次の 2 行は、例と同様にインデントされていません。

ここで私のエラーを親切に指摘してもらえますか？

また、これらの3行の間のスペースをそれほど広く空けないようにする方法を知りたいですか? それとも、使用するテキストの種類に依存しますか? (たとえば、ここにあるように、テキストにタグを使用しています。)

前もって感謝します！

4

4 に答える 4

1

pre および他のブロックの引用符を捨てて、スタイルを使用してインデントを定義し、行のインデント レベルをマークアップすることができます。例えば：

<div>"Knowing is not enough, we</div>
<div style="text-indent:30px;">must apply. Willing is not</div>
<div style="text-indent:70px;">enough, we must do."</div>
于 2014-03-06T13:25:34.833 に答える
1

質問にリンクされている画像のように等幅フォントのプレゼンテーションが必要な場合、最も簡単な方法は、pre要素のみを使用することです。

<pre>
“Knowing is not enough. We 
              must apply. Willing is not
                    enough. We must do.”
</pre>

結果：

「知るだけでは不十分。私達
              適用する必要があります。喜んではありません
                    足りる。私たちはしなければなりません。

ただし、一般に、各行をdiv要素でラップし、CSS を使用してmargin-left. これにより、可変幅フォントを使用できます。次に、インデントに適切な単位を選択する必要がありますem。ch

于 2014-03-06T15:03:34.380 に答える
1

インデントは、HTML が表現すべきセマンティックな意味ではなく、プレゼンテーションであるため、実際にはスタイリングに属しています。

ただし、html のみでこれを行うには、breaks と nbsp タグの使用を検討してください。

<p>
"Knowing is not enough, we<br>
&nbsp;&nbsp;must apply. Willing is not<br>
&nbsp;&nbsp;&nbsp;&nbsp;enough, we must do."</p>

nbsp タグの数を増やして間隔を調整します。

于 2014-03-06T13:42:46.450 に答える
0

最初の行を左に、残りの 2 行を右に揃えることができます。

詩がページの幅全体を占めないようにするために、要素に幅制限を追加できます。
（質問のテキストでこれらのことを明確にしてください。）

例: http://jsfiddle.net/hhh87/4/

<div style="text-align: right; min-width:300px; max-width: 40%;">
    <div style="text-align: left;">"Knowing is not enough, we</div>
    <div>must apply. Willing is not</div>
    <div>enough, we must do."</div>
</div>

CSS 代替

もちろん、CSS ファイルを使用し、スタイルをインラインで設定しないのが理想的です。
次に、より一般的にスタイルを設定することもできます。

HTML:

<div class="poem">
    <div>"Knowing is not enough, we</div>
    <div>must apply. Willing is not</div>
    <div>enough, we must do."</div>
</div>

CSS:

.poem > * {
    text-align: right;
    min-width: 300px;
    width: 40%;
}
.poem > *:first-child {
    text-align: left;
}
于 2014-03-06T13:30:21.563 に答える