2

(わかりやすくするために何度か編集しています)

注: HTML を書いているのは私ではありません。

HTML の形式は次のとおりです (注: リンクとリンクの後のテキストは同じ行にあります)。

<li>
    <strong>Title of section</strong>
    <br>

    &nbsp;&nbsp;&nbsp;
    <!-- Add hanging indent to subsequent lines if text goes onto second line-->
    <a>link here</a> Some text here...
    <br>

    &nbsp;&nbsp;&nbsp;
    <!-- Add hanging indent to subsequent lines if text goes onto second line-->
    <a>another link</a> More Text ... 
</li>

私がやろうとしているのは、リンクで始まりテキストで続く各行にぶら下げインデントを追加して、テキストが次の行に続く場合、後続の行がインデントされるようにすることです。

ぶら下げインデントの例(ありがとう @Mohsen)

問題の図 (黄色のテキストで始まる行が左端にありすぎます。その上の行に「リンク」が並ぶようにインデントする必要があります): ここに画像の説明を入力

純粋なCSSでこれを行う方法はありますか? そうでない場合は、javascript または jQuery を使用しますか?

4

6 に答える 6

5

text-indentこれは、およびpadding-left/を使用して実現できますmargin-left

li{
    text-indent: -25px;
    padding-left: 25px;
}

働くフィドル

hanging" text-indent " プロパティの値もあります (実験的)。MDNを確認してください。

于 2013-09-17T14:47:55.427 に答える
0

空白が原因で不可能になっているように見えるため、問題に対するスクリプトを使用しない解決策はないと思います。これはどうですか: -要素内のすべてをインデントし<li>、タイトルを元に戻し、すべての空白を削除します。

CSS

li {
    padding-left: 10px;
}

li > strong {
    display:block;
    margin: 0 0 0 -10px;
}

JavaScript

$('ul > li').each(function() {
    $(this).html($(this).html().replace(/&nbsp;/gi, ''));
});

置換関数は、「削除 ' ' - まだ試行中」に対するジェネシスの回答から適応されます。&nbsp;

デモ

購入前にお試しください

于 2013-09-17T15:25:38.293 に答える
0

インデントに改行しない空白を使用しないでください。あなたが経験しているように、それらは最初の行だけをインデントします。代わりに、適切な HTML を使用してください。

<li>
    <strong>Title of section</strong>
    <p><a>link here</a> Some text here that might go into a second line</p>
    <p><a>another link</a> More Text that is indented even in subsequent lines when text goes onto second or more lines</p>
</li>

margin-leftまたはを使用して段落をインデントできるpadding-leftようになりました。最初の行を別の方法で (どちらかの方向に) インデントしたい場合は、 を使用できますtext-indent

于 2013-09-17T15:54:44.590 に答える
0

テキストを で折り返して<span>から、左マージン/パディングでスタイルを設定します。

編集: HTML を編集できない場合は、アンカーに右マージンを追加してください

于 2013-09-17T14:42:28.313 に答える