我有成千上万的 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 only 修复对 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 结构，所以这不是必需的。
谢谢!
最佳答案
jQuery 方法 - 概念验证
你可以这样做:
var parentWidth = 500;
var idealLeft = 18;
$('p.special').offset({ left: idealLeft }).width(parentWidth);
您需要注意确定页面的宽度和左侧缩进的理想值。然而，这并不难。
关键是首先对所有 p.special 元素应用一个公共(public)的左偏移量，然后设置一个公共(public)的宽度。
在这种情况下，您不必接触旧版 CSS，也不必冒破坏任何预先存在的列表的风险。
参见 jsFiddle 的演示
关于javascript - 居中元素时忽略列表缩进，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18723285/