2

何千ページにも及ぶ HTML を実際に変更することはできないため、この修正は CSS または js ベースにする必要があります。

.special p時々リスト内にあるタグを持っています (通常はそうではありません)。ページ幅に基づいて中央に配置し、リストのインデントを無視する必要があります。

例：

<style>
.special{
font-weight:bold;
text-align:center;
}

</style>
<body>
Here comes a list!
<ol>
<li>Blah</li>
    <p class="special">Incorrect</p>
    <ul>
        <li>Blah</li>
        <p class="special">Incorrect</p>
    </ul>
</ol>

<p class="special">Correct</p>

<ol start="2">
    <li>Blah</li>
</ol>
</body>

デモを参照してください: http://jsfiddle.net/xa3sT/1/

最初の .special 要素はリストの内側にあるため、タブで囲まれています。3 番目の要素は外側にあるため、正しく中央に配置されます。前者を後者としてレンダリングするために多くのソリューションを試しましたが、それらはすべて li 要素用であり、および/または親リスト要素に特別な css ルールが必要でした。LI のみの修正は p タグでは機能しませんでした。グローバルな ul,ol ソリューションを使用することをためらっています。これらは変則的なケースであり、多種多様なリストの外観を変更するリスクを冒したくないからです。これらのドキュメントで。

さらに、お気づきかもしれませんが、2 番目の要素は最初の要素内にネストされたリスト内にあります。私もこれの例を見てきましたので、インデントのサイズは一貫していません。これにより、負のテキストインデントの設定も機能しなくなります。

私はいつもこのようなことをすることができます:

    .special{
    font-weight:bold;
    text-align:center;

}

ul .special, ol .special{
    text-indent:-2.5em;

}
ul ul .special, ol ul .special, ul ol .special, ol ol .special{
    text-indent:-5em;

}
ul ul ul .special, ol ul ul .special, ul ol ul .special, ol ol ul .special,
ul ul ol .special, ol ul ol .special, ul ol ol .special, ol ol ol .special{
    text-indent:-7.5em;

}
ul ul ul ul .special, ol ul ul ul .special, ul ol ul ul .special, ol ol ul ul .special,
ul ul ol ul .special, ol ul ol ul .special, ul ol ol ul .special, ol ol ol ul .special,
ul ul ul ol .special, ol ul ul ol .special, ul ol ul ol .special, ol ol ul ol .special,
ul ul ol ol .special, ol ul ol ol .special, ul ol ol ol .special, ol ol ol ol .special{
    text-indent:-10em;

}
ul ul ul ul ul .special, ol ul ul ul ul .special, ul ol ul ul ul .special, ol ol ul ul ul .special,
ul ul ol ul ul .special, ol ul ol ul ul .special, ul ol ol ul ul .special, ol ol ol ul ul .special,
ul ul ul ol ul .special, ol ul ul ol ul .special, ul ol ul ol ul .special, ol ol ul ol ul .special,
ul ul ol ol ul .special, ol ul ol ol ul .special, ul ol ol ol ul .special, ol ol ol ol ul .special,
ul ul ul ul ol .special, ol ul ul ul ol .special, ul ol ul ul ol .special, ol ol ul ul ol .special,
ul ul ol ul ol .special, ol ul ol ul ol .special, ul ol ol ul ol .special, ol ol ol ul ol .special,
ul ul ul ol ol .special, ol ul ul ol ol .special, ul ol ul ol ol .special, ol ol ul ol ol .special,
ul ul ol ol ol .special, ol ul ol ol ol .special, ul ol ol ol ol .special, ol ol ol ol ol .special{
    text-indent:-12.5em;

}

しかし、特定の要素のリストのインデントを無視するより良い方法は確かにありますか?

編集: マークのソリューションは機能する必要がありますが、IE7 の場合、およびおそらく、ここで列挙していないこれらのドキュメントのその他の特性の場合、この特定の問題では機能しません。

臨時雇用者の解決:

$( ".special" ).each(function(index) {
  var depth = $(this).parents('ul,ol').length * -2.5;
  $(this).css('text-indent',depth+"em");
});

今後はスクリプトを作成して、基礎となる html 構造を修正するので、これは必要ありません。

ありがとう！

4

2 に答える 2

0

クラスではなくタグでAlexs Gのソリューションを試してください。しかし、ネストされたスタイルはすべてなくなります。 .specialol

 .special{
        font-weight:bold;
        text-align:center;
            background: #d4d4d4;
    }

    ol {
        list-style-position:inside;
        padding:0;
    }
于 2013-09-10T16:53:37.537 に答える