Question

我有数千页的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元素位于列表中，因此它被选中。第三个是外部的，因此它正确居中。我已经尝试了许多解决方案来将前者渲染为后者，但它们都是li元素和/或父列表元素所需的特殊css规则。 LI唯一修复不适用于p标签，我对使用全局ul，ol解决方案犹豫不决，因为这些是奇怪的案例，我不想冒险改变各种各样的列表的外观在这些文件中。

此外，您可能已经注意到第二个元素位于嵌套在第一个元素中的列表中。我也见过这样的例子，因此缩进的大小会不一致。这使得设置否定文本缩进也不起作用。

我总能做到这样的事情：

    .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;

}

但是肯定有一种更好的方法来忽略给定元素的列表缩进？

编辑：Marc的解决方案应该可行，但是对于IE7，或许，这些文档的一些其他特性我没有在这里列举，它不适用于这个特定的问题。

临时解决方案：

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

展望未来我将开发一个脚本来修复底层的html结构，所以这不是必需的。

谢谢！

Answer 1

jQuery方法 - 概念验证

你可以这样做：

var parentWidth = 500;
var idealLeft = 18;

$('p.special').offset({ left: idealLeft }).width(parentWidth);

您需要注意确定页面的宽度和左缩进的理想值。但是，这并不太难。

关键是首先对所有p.special元素应用公共左侧偏移，然后设置公共宽度。

在这种情况下，您不必触及旧版CSS并冒险破坏任何已有的列表。

请参阅jsFiddle

上的演示

Answer 2

尝试Alexs G的解决方案不是.special类，而是ol标记。但随后嵌套的样式将全部消失。

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

    ol {
        list-style-position:inside;
        padding:0;
    }

在居中项目时忽略列表缩进

2 个答案:

jQuery方法 - 概念验证