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 元素在列表内，因此它被标记在里面。第三个在外面，所以它正确居中。我已经尝试了许多解决方案来将前者渲染为后者，但它们都适用于 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 结构，因此这不是必需的。

谢谢！

4

2 回答 2

0

一种 jQuery 方法 - 概念证明

你可以这样做：

var parentWidth = 500;
var idealLeft = 18;

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

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

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

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

在jsFiddle上查看演示

于 2013-09-10T16:12:24.077 回答
0

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

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

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