web-dev-qa-db-ja.com

インラインの順序付きリストに番号を表示するにはどうすればよいですか？

リストがあります：

<ol>
    <li>Login</li>
    <li>Address</li>
    <li>Shipping</li>
</ol>

10進数を細かく表示しますが、<li>インラインまたはインラインブロックにすると、数字が消えます！オンラインで他の場所を見て、十分なマージンとパディングがあることを確認する必要があると述べました。そして、私はそうすることを確信しています（それぞれ10px！）数字が消えているかもしれない他の理由がありますか？ firebugから、inlineをオフにするとすぐに戻ってくることがわかります。

CSSは次のとおりです。

ol {
  padding: 20px;
  list-style-type: decimal;
}
ol li {
  display: inline;
  margin: 0 10px;
  padding: 0 10px;
}
csshtml-lists
20
Damon

これがなぜ発生するのかはわかりませんが、display: inlineの代わりに左にフローティングすることで解決できます。

https://jsfiddle.net/CMKzK/ を参照してください

ol {
    padding: 20px; 
    list-style-type: decimal;

}
ol li {
    float: left;
    margin: 0 10px;
    padding: 0 10px;
}
17
Eric Fortis

あなたはこれを試すことができます：

ol
{
  /* List will start at 25 + 1 = 26 */
  /* Remove the 25 if you want to start at 1 */
  counter-reset: LIST-ITEMS 25;
}

li
{
  display: inline;
  padding-right: 0.5em;
}

li:before
{
  content: counter( LIST-ITEMS ) ".";
  counter-increment: LIST-ITEMS;
  padding-right: 0.25em;
  font-style: italic;
  font-weight: bold;
}
<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</li>
  <li>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</li>
  <li>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</li>
  <li>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse</li>
  <li>cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</li>
  <li>proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
</ol>
11
nico

古いバージョンのIEを気にしない場合は、 自動カウンターと番号付け を使用できます。

それ以外の場合は、手動で番号を指定する必要があります（@Babikerのソリューション）、またはfloatli 's（@Eric Fortisのソリューション）。

5
zzzzBov

私は、次のように左浮動要素によってol番号が押し付けられる問題を回避しました。

li {
    overflow:hidden;
    list-style-position: inside;
    display:block;
}
.number {
    display:list-item;
    position:absolute;
}
.first-item {
    float:left; 
    /* revise margin to your needs */       
    margin-left:35px;
}
.second-item {
    float:left;
}

次のDOMが与えられた場合：

<ol id="playlist">

        <li>
            <div class="number"></div>
            <a class="first-item" href="#">click here</a>
            <div class="second-item">some detail</div>
        </li>
</ol>

インラインブロック要素でも機能するようです。

0
hedgehog