0

各リスト項目内に番号が配置されているリストがあります。各リスト項目には、左または右にフローティングされたフローティング コンテンツが含まれます。問題は、番号付けが各行の最初のものになるように意図されている場合に、リストの番号付けが最初の左浮動要素の右にレンダリングされることです。

問題の実例を次に示します。Chrome、Firefox、および IE9 で問題が発生していることがわかりました (他のブラウザーはテストしていません)。以下に関連するコードも含めました。

HTML:

<ol>
    <li>
        <div class="name">Fingers</div>
        <div class="count">10</div>
    </li>
    <li>
        <div class="name">Arms</div>
        <div class="count">2</div>
    </li>
    <li>
        <div class="name">Heads</div>
        <div class="count">1</div>
    </li>
</ol>

CSS:

ol {
    list-style: decimal inside none;
}

ol li .name {
    float: left;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

ol li .count {
    float: right;
    text-align: right;
    width: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

編集：以下の私のコメントによると、番号付けがリスト項目の内側にあることが重要です。その理由は、各リスト項目間に境界線が必要であり、番号付けを境界線の枠外ではなく枠内に配置したいからです。

4

1 に答える 1

3

更新しました：

ol li {
  padding: 4px;
  border-bottom: 1px solid #ccc;

}

ol {
    list-style: decimal inside;
}

ol li .name {
    display: inline-block;
    vertical-align: text-bottom;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

ol li .count {
    display: inline-block;
    vertical-align: text-bottom;
    text-align: right;
    width: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
于 2013-02-20T21:45:09.813 に答える