居中项目时忽略列表缩进答案

【问题标题】：Ignore list indentation while centering an item居中项目时忽略列表缩进
【发布时间】：2013-09-14 10:06:01
【问题描述】：

我有数以千计的 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 结构，因此这不是必需的。

谢谢！

【问题讨论】：

嗯，这是一个 .special css ！
如果你简单地将padding: 0 添加到你的.special 类，然后摆脱所有嵌套的css 废话呢？
试过了，padding 和 margin 样式似乎对 p 标签的偏移没有任何影响。
很遗憾，您无法编辑无效的 HTML。

标签： javascript jquery html css

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

一种 jQuery 方法 - 概念验证

你可以这样做：

var parentWidth = 500;
var idealLeft = 18;

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

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

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

在这种情况下，您不必接触旧版 CSS，也不必冒险破坏任何预先存在的列表。

在jsFiddle查看演示

【讨论】：

我喜欢！我正在研究 jQuery 以根据列表级别设置缩进，但设置一个固定的左值效率更高。
让事情变得简单的线索是您希望 p.specials 相对于页面居中，所以我从一开始就忽略了列表。
jQuery 1.x 支持 IE7，所以问题可能出在 CSS 上，它是怎么坏的？
你可能想看看：stackoverflow.com/questions/4334664/… 还要检查 quirks mode (DOCTYPE) 相关的问题。
p 标签消失，直到我调整窗口大小。可能与整体文档结构/父 div 有关。可能只是 IE9 对 IE7 的仿真。有点搞砸了，我不确定。然而，在 IE7 被认为太刺激以至于无法支持之前，这已经足够了： $( ".special" ).each(function(index) { var depth = $(this).parents('ul,ol').length * -2.5 ; $(this).css('文本缩进',depth+"em"); });同时，我将研究一个 py 脚本，它可以可靠地检测和修复无效的 html 结构，因此不再需要。