width - 决定宽度的因素是什么与 {display:inline-block;}？

Question

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

设置基本上可以解决问题{display:inline-block;}，<ol>但不知何故谷歌浏览器决定<ol>' 的宽度应该是462px。这导致第三个<li>突破了两条既不需要也不需要的物理线。

462px是从哪里来的？如何将第三个保留在<li>一行？我不想将<ol>' 宽度设置为静态值，因为我有很多这样<ol>的 s。使用{float:left;}而不是{display:inline-block}触发类似的行为，但也迫使我清除<ol>. 给出<ol>a widthofauto似乎并没有改变任何事情（我怀疑它已经是 了auto）。提前感谢您的任何建议。

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;
}