web-dev-qa-db-ja.com

HTML + CSS：円の中に番号が付いた番号付きリスト

私はCSS + HTMLで次のような順序付きリストを作成しようとしています： CSS List Example

私はこれを行う方法を理解することはできません。 list-imageを使用してみましたが、数字が表示されません。背景を設定しようとしましたが、list-style-positionがoutsideに設定されている場合、数字の後ろに表示されません。背景とlist-style-position: insideを設定してから、li内のテキストをdivに配置して位置合わせしましたが、フロート、マージンなどの組み合わせはラッピングなしでは機能しませんでした数字の周り。

これは私が多くのウェブサイトで見たもののように思えますが、現時点では実用的な例を見つけることができないようです。

だから、誰もこれで私を助けることができますか？ HTML + CSSを使用して、理想的にはJSを使用せず、間違いなく画像のみを使用せずに、上記をどのように作成しますか。このテキストは選択可能で、コピー/貼り付け可能である必要があります。

コメンターが尋ねたので、ここに私が今持っているマークアップがあります：

<ol>
  <li><span>List item one.</span></li>
  <li><span>List item two.</span></li>
  <li><span>List item three.</span></li>
</ol>

私が試したCSSのどれも動作に近づいてさえいないので、現在持っているものを共有することの価値がわかりません。失敗したバージョンが1つあります...

ol { display: block; list-style: decimal outside url('/images/lists/yellow-circle-18px.png'); }
ol li { width: 176px; margin-right: 20px; float: left; }
ol li span { display: block; }
htmlcssgeometryhtml-lists
42
Andrew

質問の水平レイアウトの側面は、CSS floatおよび/または_display:inline-block;_を使用して実現できます。リストエレメントはこの手法を使用してドロップダウンメニューを作成するためによく使用されるため、これらについては十分に文書化されているため、ここではこれ以上説明しません。

丸で囲んだ数字の側面はもう少し注意が必要です。

グラフィックを使用する準備ができていない場合は、標準のリストスタイルを使用して実現することはできず、それぞれに画像名をハードコーディングします。これは非常に昔ながらのアプローチであり、あなたが探しているものではないと思います。

私の頭に浮かんだ1つのアイデアは、 this one などの円で囲まれた数字のフォントを使用し、そのフォントを使用するように_<ol>_要素をスタイルするだけです。通常のフォントを使用する_<li>_要素。これの欠点は、リストを10項目未満に維持する必要があり、ユーザーのブラウザはそのためだけにフォント全体をダウンロードする必要があることです。また、サイトの他のフォントと一致するものを選択する必要があります。おそらく理想的なソリューションではありませんが、うまくいくでしょう。

より実用的な解決策は、リストスタイルを完全に放棄することです（同じHTMLマークアップを使用しますが、_list-style:none;_を設定します）。次に、CSSのほとんど使用されていない_:before_およびcount()機能を使用して、番号が挿入されます。

あなたの場合、それは次の行に沿っているでしょう：

_ol ul:before {
    content: counter(mylist);
}
_

これにより、同じ番号のシーケンスが得られます。次に、上記のセレクタにさらにスタイルを追加して、円の背景、いくつかの色、および少しのマージンを与える必要があります。また、_<li>_要素のスタイルを設定して、そのテキスト全体が数字の下に折り返されるのではなく、数字からインデントされるようにする必要があります。これは_display:inline-block;_または同様の方法で実行できると期待しています。

少し実験が必要な場合があり、完全な答えは出ていませんが、この手法は間違いなく機能します。

ブラウザの互換性チャートとともに、記事と例については quirksmode.org を参照してください。

また、ブラウザの互換性チャートは、この手法の1つの大きな欠点に関する手がかりを提供します。IE7以前では機能しません。 IE8と他のすべてのブラウザーで動作するので、IE7ユーザーが表示しない（そして最近ではそれほど多くない）ユーザーと一緒に暮らすことができれば問題ありません。

23
Spudley

私は@Spudleyが彼の答えに持っているアイデアを使用しています。また、私が書いた以前の答えからのアイデアを使用しています。

参照：http://jsfiddle.net/j2gK8/

IE8はborder-radiusをサポートしておらず、CSS3 PIEなどの回避策は:beforeで機能しません。また、IE7のような古いブラウザーはcounterをサポートしていません。

古いブラウザで動作させるには、自分で数字を書く必要があります。また、派手な丸い角を通常の画像と交換しました（could have丸い角ですが、私の例ではそうではありません）：

参照：http://jsfiddle.net/XuHNF/

そのため、IE7 + IE8では機能しない派手なアプローチがありますが、おそらくそれは除外されます。そして、見苦しいが互換性のある方法があります。

もちろん、常に別の問題があります。テキストの量が異なる場合、- これが発生します 。

あなたはこの問題を見ています：

28
thirtydot

まだこれを読んでいる人がいれば、同じ問題に遭遇し、非常に役立つチュートリアルを見つけました。

順序付けられたリスト番号のスタイル設定

ol {
    counter-reset:li; /* Initiate a counter */
    margin-left:0; /* Remove the default left margin */
    padding-left:0; /* Remove the default left padding */
}
ol > li {
    position:relative; /* Create a positioning context */
    margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
    padding:4px 8px; /* Add some spacing around the content */
    list-style:none; /* Disable the normal item numbering */
    border-top:2px solid #666;
    background:#f6f6f6;
}
ol > li:before {
    content:counter(li); /* Use the counter as content */
    counter-increment:li; /* Increment the counter by 1 */
    /* Position and style the number */
    position:absolute;
    top:-2px;
    left:-2em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    width:2em;
    /* Some space between the number and the content in browsers that support
       generated content but not positioning it (Camino 2 is one example) */
    margin-right:8px;
    padding:4px;
    border-top:2px solid #666;
    color:#fff;
    background:#666;
    font-weight:bold;
    font-family:"Helvetica Neue", Arial, sans-serif;
    text-align:center;
}
li ol,
li ul {margin-top:6px;}
ol ol li:last-child {margin-bottom:0;}
19
Rob Rasmussen

その解決策を見つけたと思います。あなたのHTMLコードは

<ol>
   <li>First item</li>
   <li>Second item</li>
</ol>

次のスタイルを適用すると、まるで円のようになります。

ol {margin-left:0; padding-left:0; counter-reset:item}
ol>li {margin-left:0; padding-left:0; counter-increment:item; list-style:none inside;margin-bottom:10px}
ol>li:before {
content:"(" counter(item) ")";
padding:3px 5px;
margin-right:0.5em;
background:#ccc;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; 
}

次に、パディングと半径をいじって、円として表示します

10
Alexios Tsiaparas

flexboxを使用し、数値を含む「li」に「divs」を追加します。

    <div class="container">
<ul class="info-list">
  <li><div>1.</div> CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
  <li><div>2.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
  <li><div>3.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
</ul>
<ul class="info-list">
  <li><div>4.</div> CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
  <li><div>5.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
  <li><div>6.</div>CPellentesque eget nunc sit amet urna ullamcorper fermentum et eu leo. Nunc vel nibh tempor, pharetra lectus congue, luctus orci.
  </li>
</ul>
</div>

CSS：

.container {
  display: flex;
}
.info-list li {
  list-style: none;
  display: flex;
}
.info-list li > div {
  display: inline-block;
  border: 2px solid #ccc;
  border-radius: 100%;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-right: 10px;
}

Codepenの場合： https://codepen.io/mkempinsky/pen/OBNXGO

0
michele

ブラウザはlist-style-imageをさまざまな場所に配置し、1つは「外側」と「内側」の位置コントロールのみを持っていることがわかります。

以下をお勧めします。

http://jsfiddle.net/vEZHU/

注：フロートを使用してそれらをレイアウトしたり、私がしたこともできます。また、これはあなたがスプライトを知っていると仮定します。

これが理にかなっていることを願っています。

0
gutierrezalex

content：counter（li）増分では増分では機能しないため、いくつかのwokraroundが見つかりました:)

li {
position: relative;
line-height: 2.5em;
list-style-type: none;
&:before{
  content: '';
  position: absolute;
  left: -29px;
  top: 7px;
  display: block;
  background: @btn-bg-secondary;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: @bg-color-primary;
  padding-left: 7px;
  line-height: 1.5em;
}
&:nth-child(1):before{
  content: '1';
}
&:nth-child(2):before{
  content: '2';
}
&:nth-child(3):before{
  content: '3';
}
&:nth-child(4):before{
  content: '4';
}
&:nth-child(5):before{
  content: '5';
}
&:nth-child(6):before{
  content: '6';
}
&:nth-child(7):before{
  content: '7';
}
&:nth-child(8):before{
  content: '8';
}
}

http://jsfiddle.net/du6ezxj7/

0
Aleš Pázner

編集：コードを変更したので、あなたが持っているものに合わせてみてください

次のように、各リストアイテム内の画像とリンクを使用して作成したカルーセルでこれを実行しようとしました。

   <ol id = "list">
     <li class = "listItems">
       <!-- Image -->
       <img src = "YourImage" class = "listNumber"></div>
       <!-- Text -->
       <div class = "listInfo">Info goes here</div>
     </li> 
   </ol>

アイテムごとになど。それらを水平に表示するには、私のcssは次のようになりました。

#list
{
    list-style: none;
    width: 5000px;  /* Total width of list IMPORTANT*/
}
    /* Image gallery list item*/
    #list li
    {
        float :left;    /* Arranges the items in a horizontal list IMPORTANT */
    }

これにより、すべての画像が水平に整列しました。リスト内の各アイテムを編集するには、それらをdivsに配置し、そこからcssを編集する必要があります。 div内のcssで問題が発生しないように、すべてを同じようにフローティングさせます。次のようにクラスごとにスタイルを設定できます。

.listNumber
{
  postion: absolute;
  left: (#)px;
  top: (#)px;
}

また、リストをすべて左に浮かせる前に、リストが少なくとも各アイテムの幅であることを確認する必要があったことも覚えています。そうでなければ、彼らは底に座ります。

0
Stanley Cup Phil