尽管！重要，但列表样式不显示列表元素？答案

【问题标题】：list-style not displaying for list elements despite !important?尽管！重要，但列表样式不显示列表元素？
【发布时间】：2010-12-15 04:38:37
【问题描述】：

好的，我在这里安装了一个 wordpress 主题（www.sullivansuccesscoaching.com/home ...我们需要 /home，因为仍然有一个 index.html 隐藏 wordpress 安装。这是故意的）。

在 /home 页面上，我为 .animCont 类运行了一个 jquery cycle.lite，它基本上使用不透明度更改来淡化幻灯片。 ol、ul 元素使用类似于 Eric Meyer 的重置样式表进行重置，因此，所有 ol、ul 元素都单独设置样式。

在每个 .animCont li 中都有一个 div.teaser。在某些 div.teaser 中有无序列表，我根本无法采用列表样式！

目前看似相关的四行css代码分别是：

.featured .animCont .alignleft {margin:0 36px 0 0;}
.featured .animCont .alignright {margin:0 0 0 36px;}
.featured .animCont .teaser ul, .featured .animCont .teaser ul li {display:block;list-style-type:disc !important;}
.featured .animCont .teaser ul li {line-height:18px;margin:6px 0 6px 20px;list-style-position:outside !important;}

出于演示目的，这里是 ul.animCont 的基本布局

<ul class="animCont">
    <li class="clearfix">
        <a href="linkurl"><img src="imageurl" /></a>
        <div class="teaser">
            <h2>The title</h2>
            <ul>
                <li>something1</li>
                <li>something2</li>
                <li>something3</li>
            </ul>
        </div><!-- // .teaser -->
    </li><!-- slide1 -->
    <li class="clearfix">
        <a href="linkurl"><img src="imageurl" /></a>
        <div class="teaser">
            <h2>The title</h2>
            <ul>
                <li>something1</li>
                <li>something2</li>
                <li>something3</li>
            </ul>
        </div><!-- // .teaser -->
    </li><!-- slide2 -->
</ul><!-- // .animCont

编辑：以下是从 Firebug 复制的计算样式

.featured .animCont .teaser ul li {
line-height:18px;
list-style-position:outside !important;
margin:6px 0 6px 20px;
}
style.css (line 238)
.featured .animCont .teaser ul, .featured .animCont .teaser ul li {
display:block;
list-style-type:disc !important;
}
style.css (line 237)
.featured .animCont li {
display:none;
width:100%;
}
style.css (line 232)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent none repeat scroll 0 0;
border:0 none;
font-size:100%;
margin:0;
outline-color:-moz-use-text-color;
outline-style:none;
outline-width:0;
padding:0;
vertical-align:baseline;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}
basic.css (line 11)
Inherited fromul
.featured .animCont .teaser ul, .featured .animCont .teaser ul li {
list-style-type:disc !important;
}
style.css (line 237)
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
reset.css (line 32)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}
basic.css (line 11)
Inherited fromdiv.teaser
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}
basic.css (line 11)
Inherited fromli.clearfix
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}
basic.css (line 11)
Inherited fromul.animCont
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
reset.css (line 32)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}
basic.css (line 11)
Inherited fromdiv.featured_container
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}
basic.css (line 11)
Inherited fromdiv.featured
.featured {
color:#E6E6E6;
}
style.css (line 213)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}
basic.css (line 11)
Inherited fromdiv.container
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}
basic.css (line 11)
Inherited fromdiv#floatswrap.smallftfl
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}
basic.css (line 11)
Inherited fromdiv#pg_wrap
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}
basic.css (line 11)
Inherited frombody.home
html > body {
font-size:14px;
}
basic.css (line 6)
body {
color:#273746;
font-family:Tahoma;
}
style.css (line 76)
body {
font-family:"Helvetica Neue","Lucida Grande",Helvetica,"microsoft sans serif",Arial,Verdana,sans-serif;
font-size:75%;
}
basic.css (line 1)
body {
line-height:1;
}
reset.css (line 29)
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}
basic.css (line 11)
Inherited fromhtml
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
font-size:100%;
}
reset.css (line 12)
* {
text-shadow:0 0 0 #000000;
}

【问题讨论】：

你看过firebug中的计算样式了吗？我用您的示例创建了一个 html 文档，它呈现正常。我认为这是您的样式规则或标记中的其他内容。
我已经查看了 firebug 中的计算样式，我会将它们添加到上面的问题中。这几天我一直在苦苦挣扎，所以传统的检测方法对我不起作用，这就是我在这里发布问题的原因。

标签： jquery html css wordpress

【解决方案1】：

我可以通过删除 CSS 规则的显示属性来显示项目符号，如下所示：

.featured .animCont .teaser ul, .featured .animCont .teaser ul li { /* display: block; */ }

和

.featured .animCont li { /* display: none; */ }

我不确定这是否正是您所需要的，但希望它能帮助您走上正轨。

【讨论】：

你太棒了我的朋友。谢谢大家！
是的，列表样式不会显示在块级元素上，如果列表项有'list-item'的显示，它会显示列表样式，但列表项显示：list-item默认情况下。

【解决方案2】：

将一些margin-left 添加到您的<li>s 中，它应该可以工作。

.animCont .teaser ul li { margin-left: 20px; }

【讨论】：

no dice... .featured .animCont .teaser ul li {line-height:18px;margin:6px 0 6px 20px;list-style-position:outside !important;} 不允许子弹显示。
我已经尝试过这个解决方案并编辑了反映的问题。这并没有改变页面的呈现方式。
我将您的行直接添加到 css 中，正如您在 sullivansuccesscoaching.com 上看到的，没有任何改变……至少在 FF、Safari 和 Chrome 中）
迟到了……但这帮助我解决了类似的问题。向 li 或 ul / ol 添加边距使项目符号/数字显示。为此 +1。