1

<ol>背景色を適用したい要素があります。<ol>背景色がの親の幅全体をカバーするのではなく、その内容とパディングだけをカバーしたくありません。

を設定{display:inline-block;}すると<ol>基本的にうまくいきますが、どういうわけか Google Chrome はの幅を462px<ol>にすべきだと判断します。これにより、3 番目が必要でも望ましくもない 2 つの物理的な行を分割します。<li>

ここに画像の説明を入力

462pxはどこから来たのですか? 3 番目を 1 行に収めるにはどうすればよい<li>ですか? <ol>そのような がたくさんあるので、幅を静的な値に設定したくありません<ol>。{float:left;}ではなくを使用すると、{display:inline-block}同様の動作がトリガーされますが、<ol>. <ol>awidthを与えても何もauto変わらないようです (すでに だったと思いautoます)。ご提案いただきありがとうございます。

4

2 に答える 2

0

次の 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;
}
于 2013-04-22T13:39:35.177 に答える