是什么决定了<ol>的宽度{display：inline-block;}？</ol>

Question

我有一个<ol>元素，我想要应用背景颜色。我不希望背景颜色覆盖<ol>父级的整个宽度，而只是覆盖其内容+一些填充。

在{display:inline-block;}上设置<ol>基本上可以解决问题，但Google Chrome会以某种方式确定<ol>的宽度应为 462px 。这导致第三个<li>突破两条物理线，这既不必要也不需要。

462px 来自哪里？如何将第三个<li>保留在一行？我不想将<ol>的宽度设置为静态值，因为我有很多这样的<ol>。使用{float:left;}而不是{display:inline-block}会触发类似的行为，但也会强制我清除<ol>之后出现的任何元素。给<ol> width auto auto似乎没有改变（我怀疑它已经是{{1}}）。提前感谢您的任何建议。

Answer 1

尝试将white-space：nowrap放到li元素

上

Answer 2

尝试使用此css代码重置您的html项目：

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: transparent;
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}
body {
    line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
    clear: both;
    font-weight: normal;
}
ol, ul {
    list-style: none;
}
blockquote {
    quotes: none;
}
blockquote:before, blockquote:after {
    content: '';
    content: none;
}
del {
    text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a img {
    border: none;
}

否则，您可以像这样覆盖此值：

的CSS：

ol,li {
width: 100% !important;
}