Question

所以，我有一个非常简单的有序列表：

<div id="home">
...
<ol id="test">
<li>Search for and find photos of any kind of place.</li>
<li>Rate photographs, vote on the places in them, and discuss them with others.</li>
<li>Share a few photos of your own. Uploading 50 gets you a free PLUS subscription!</li>
<li class="last">Tell us what you think about the site and help us make it better.</li>
</ol>
...
</div>

问题是，列表项的数字不会呈现。尽管我的CSS：

ol#test { display: block; list-style-type: decimal; list-style-position: inside; }
ol#test li { display: block; width: 176px; margin-right: 20px; }

我甚至添加了#test id，希望它可能是某种继承优先级问题，但这并没有解决问题。

这是来自Firebug的风格追踪：

div#home ol#test li {
    display: block;
    margin-right: 20px;
    width: 176px;
}
style....3308249 (line 1035)
li {
    line-height: 1.4;
}
supert...6247640 (line 40)
li {
    margin-bottom: 0.5em;
}
supert...6247640 (line 33)
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 {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    font-size: 100%;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}
reset....7103941 (line 4)
Inherited fromol#test
div#home ol#test {
    list-style-position: inside;
    list-style-type: decimal;
}
style....3308249 (line 1031)
ol {
    list-style-type: decimal;
}
supert...6247640 (line 32)
ul, ol {
    list-style-position: outside;
}
supert...6247640 (line 30)
ol, ul {
    list-style: none outside none;
}
reset....7103941 (line 20)
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....7103941 (line 4)
Inherited fromdiv#welcome.section
div#home div.section {
    font-size: 15px;
    line-height: 20px;
}
style....3308249 (line 1011)
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....7103941 (line 4)
Inherited fromdiv#home
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....7103941 (line 4)
Inherited fromdiv#main.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....7103941 (line 4)
Inherited fromdiv#wrapper
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....7103941 (line 4)
Inherited frombody.home
body {
    color: white;
    text-shadow: 0 1px #1C1D1E;
}
style....3308249 (line 731)
body {
    font: 300 13px/18px "Helvetica Neue","Helvetica","Lucida Grande",sans-serif;
}
style....3308249 (line 67)
body {
    font: 12px/18px "Helvetica Neue","Helvetica","Lucida Grande",sans-serif;
}
supert...6247640 (line 3)
body {
    line-height: 1;
}
reset....7103941 (line 17)
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....7103941 (line 4)
Inherited fromhtml.wf-ffmarketweb1ffmarketweb2-n4-active
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....7103941 (line 4)

这里有什么我想念的吗？无论出于何种原因，我似乎无法找到问题。 Firefox和Safari中的问题是相同的。

谢谢！

Answer 1

请勿为display:block列表项设置li。

ol#test li { margin-right: 20px;width:140px;  padding:10px; }

这是jsfiddle：

http://jsfiddle.net/naveed_ahmad/he9Nm/

订购清单中的数字不会呈现

1 个答案: