311

リストの箇条書きまたは10進数がすべて、優れたテキストブロックと同じ高さの「内部」リストが必要です。リストエントリの2行目は、最初の行と同じインデントを持っている必要があります。

例えば：

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor. Aenean Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Donec quam felis,

1. Text
2. Text
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
   second line of longer Text
4. Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor.

CSSは、その「list-style-position」に2つの値（insideとoutside）のみを提供します。「内側」の2行目は、上位行ではなくリストポイントと同じ高さになります。

3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text

私のリストの「外側」の幅は、もはや優れたテキストブロックと同じ高さではありません。

幅のtext-indent、padding-left、margin-leftは、順序付けされていないリストでは機能しますが、list-decimalの文字数に依存するため、順序付けられたリストでは失敗します。

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
 Aenean commodo ligula eget dolor. 

 3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
    second line of longer Text
 4. Text
11. Text
12. Text

「11」と「12」。「3」と比較して優れたテキストブロックと同じ高さではありません。および「4.」。

では、順序付きリストと2行目のインデントの秘密はどこにあるのでしょうか。がんばってくれてありがとう！

4

14 に答える 14

305

アップデート

この答えは時代遅れです。以下の別の回答で指摘されているように、これはもっと簡単に行うことができます。

ul {
  list-style-position: outside;
}

https://www.w3schools.com/cssref/pr_list-style-position.aspを参照してください

元の回答

これがまだ解決されていないのを見て驚いています。次のように、ブラウザのテーブルレイアウトアルゴリズムを（テーブルを使用せずに）使用できます。

ol {
    counter-reset: foo;
    display: table;
}

ol > li {
    counter-increment: foo;
    display: table-row;
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell; /* aha! */
    text-align: right;
}

デモ： http： //jsfiddle.net/4rnNK/1/

ここに画像の説明を入力してください

IE8で機能させるには、:beforeコロンを1つ使用したレガシー表記を使用します。

于 2013-07-07T18:55:03.873 に答える
231

私はこれがあなたが探していることをするだろうと信じています。

.cssClass li {
  list-style-type: disc;
  list-style-position: inside;
  text-indent: -1em;
  padding-left: 1em;
}

JSFiddle：https ://jsfiddle.net/dzbos70f/

ここに画像の説明を入力してください

于 2013-07-07T17:29:48.850 に答える
46

ハックなしで最も簡単でクリーンな方法は、次のようにul（またはol）をインデントすることです。

ol {
  padding-left: 40px; // Or whatever padding your font size needs
}

これにより、受け入れられた回答と同じ結果が得られます：https ://jsfiddle.net/5wxf2ayu/

スクリーンショット：

ここに画像の説明を入力してください

于 2015-08-18T13:22:08.403 に答える
26

このフィドルを確認してください：

http://jsfiddle.net/K6bLp/

CSSを手動でインデントulして使用する方法を示しています。ol

HTML

<html>
  <head>
    <title>Lines</title>
  </head>
  <body>
    <ol type="1" style="list-style-position:inside;">
      <li>Text</li>
      <li>Text</li>
      <li>longer Text, longer Text, longer Text, longer Text    second line of longer Text</li>
    </ol>  
    <br/>
    <ul>
      <li>Text</li>
      <li>Text</li>
      <li>longer Text, longer Text, longer Text, longer Text    second line of longer Text</li>
    </ul>
  </body>
</html>

CSS

ol 
{
    margin:0px;
    padding-left:15px;
}

ol li 
{
    margin: 0px;
    padding: 0px;
    text-indent: -1em;
    margin-left: 1em;
}

ul
{
    margin:0;
    padding-left:30px;
}

ul li 
{
    margin: 0px;
    padding: 0px;
    text-indent: 0.5em;
    margin-left: -0.5em;
}

また、私はあなたのフィドルを編集しました：

http://jsfiddle.net/j7MEd/3/

それをメモします。

于 2012-05-03T14:03:48.760 に答える
11

olまたはのいずれかのマージンとパディングをulCSSで設定できます。

ol {
  margin-left: 0;
  padding-left: 3em;
  list-style-position: outside;
}
于 2012-05-03T09:44:59.380 に答える
8

CSSを使用して範囲を選択できます。この場合、リストアイテム1〜9が必要です。

ol li:nth-child(n+1):nth-child(-n+9)

次に、これらの最初のアイテムのマージンを適切に調整します。

ol li:nth-child(n+1):nth-child(-n+9) { margin-left: .55em; }
ol li:nth-child(n+1):nth-child(-n+9) em,
ol li:nth-child(n+1):nth-child(-n+9) span { margin-left: 19px; }

ここで実際の動作を確認してください：http：//www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/

于 2012-11-30T14:34:27.937 に答える
8

次のCSSがそのトリックを実行しました。

ul {
  margin-left: 1em;
}
    
li {
  list-style-position: outside;
  padding-left: 0.5em;
}
于 2018-07-17T19:48:15.903 に答える
7

私はあなたがただパディングの外にリスト「弾丸」を置く必要があると信じています。

li {
  list-style-position: outside;
  padding-left: 1em;
}
于 2015-03-24T23:23:31.437 に答える
6

私の解決策はPumbaa80の解決策とまったく同じですが、要素display: tableの代わりに使用することをお勧めします。したがって、次のようになります。display:table-rowli

ol {
  counter-reset: foo; /* default display:list-item */
}

ol > li {
  counter-increment: foo;
  display: table; /* instead of table-row */
}

ol > li::before {
  content: counter(foo) ".";
  display: table-cell;
  text-align: right;
}

これで、li's間の間隔にマージンを使用できます

于 2014-09-10T15:30:05.533 に答える
2

私はこの解決策がとても好きです：

ul {
  list-style-position: inside;
  list-style-type: disc;
  font-size: 12px;
  line-height: 1.4em;
  padding: 0 1em;
}

ul li {
  margin: 0 0 0 1em;
  padding: 0 0 0 1em;
  text-indent: -2em;
}
于 2016-10-20T10:35:05.270 に答える
0

ol、ulリストは、必要に応じて機能します。境界線のあるテーブルを使用することもできます。cssにはnoneがあります。

于 2012-06-06T20:04:25.637 に答える
0

CSSは、その「list-style-position」に2つの値（insideとoutside）のみを提供します。「内側」の2行目は、上位行ではなくリストポイントと同じ高さになります。

順序付きリストでは、介入なしで、「list-style-position」に値「inside」を指定すると、長いリストアイテムの2行目にインデントはありませんが、リストの左端に戻ります（つまり、アイテムの番号に合わせて左揃えになります）。これは順序付きリストに固有であり、順序なしリストでは発生しません。

代わりに「list-style-position」に値「outside」を指定すると、2行目は1行目と同じインデントになります。

境界線のあるリストがあり、この問題が発生しました。「list-style-position」を「inside」に設定すると、リストが思ったように見えませんでした。しかし、「list-style-position」を「outside」に設定すると、リストアイテムの数がボックスの外になりました。

これを解決するには、リスト全体の左マージンを広く設定するだけで、リスト全体が右に押し出され、以前の位置に戻ります。

CSS：

ol.classname {margin：0; padding：0;}

ol.classname li {margin：0.5em 0 0 0; padding-left：0; list-style-position：outside;}

HTML：

<ol class="classname" style="margin:0 0 0 1.5em;">
于 2013-11-25T17:24:32.223 に答える
-1

さて、私は戻っていくつかのことを理解しました。これは私が提案していたものに対する大まかな解決策ですが、機能しているようです。

まず、番号を一連の順序付けられていないリストにしました。順序付けされていないリストには、通常、各リストアイテムの先頭にディスクがあります（

  • ）したがって、CSSをlist-styleに設定する必要があります。none;

    次に、リスト全体を表示しました：table-row。ここで、コードを取得するのではなく、コードを貼り付けてみませんか？

    <html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title>Result</title>
</head>
<body>
    <div><ul>
        <li>1.</li>
        <li><p>2.</p></li>
        <li>10.</li>
        <li><p>110.</p></li>
        <li>1000.</li>
    </ul>
    </div>
    <div>
        <p>Some author</p>
        <p>Another author</p>
        <p>Author #10</p>
        <p>Author #110</p>
        <p>The one thousandth author today will win a free i-Pod!!!! This line also wraps around so that we can see how hanging indents look.</p>
        </div>
</body>
</html>'

    CSS：

    ul li{
list-style: none;
display: table-row;
text-align: right;

    }

    div {
float: left;
display: inline-block;
margin: 0.2em;

    }

    これは、2番目のdivのテキストを、最初のdivの順序付きリストの番号に揃えているようです。リストとテキストの両方をタグで囲んで、すべてのdivにインラインブロックとして表示するように指示できるようにしました。これはそれらをうまく並べました。

    余白は、ピリオドとテキストの先頭の間にスペースを入れるためにあります。そうでなければ、彼らはお互いにぶつかり合い、それは目障りのように見えます。

    私の雇用主は、（長い書誌的エントリの）折り返しテキストを、左側の余白ではなく、最初の行の先頭に揃えたいと考えていました。元々、正の余白と負のテキストインデントをいじっていましたが、2つの異なるdivに切り替えると、divの左側の余白が原因で、テキストがすべて揃うようにする効果があることに気付きました。テキストが自然に始まったマージンでした。したがって、必要なのはスペースを追加するための0.2emのマージンだけで、他のすべては水泳で並んでいました。

    OPが同様の問題を抱えていた場合、これが役立つことを願っています...私は彼/彼女を理解するのに苦労しました。

    • 于 2013-10-15T19:35:17.420 に答える
    -1

    私はこれと同じ問題を抱えていて、user123444555621の答えを使い始めました。ただし、それぞれにpaddingとを追加する必要もありましたが、それぞれがであるため、このソリューションでは許可されていません。borderlilitable-row

    まず、を使用しての番号counterを複製します。ol

    次にdisplay: table;、それぞれliとdisplay: table-cellに設定し:beforeて、インデントを付けます。

    最後に、トリッキーな部分です。全体にテーブルレイアウトを使用していないため、それぞれが同じ幅であるolことを確認する必要があります。単位:beforeを使用して、幅を文字数とほぼ同じに保つことができます。'の桁数が異なる場合に幅を均一に保つために、数量クエリを実装できます。リストが100アイテム以上にならないことがわかっている場合、幅を変更するように指示するのに必要な数量クエリルールは1つだけですが、さらに簡単に追加できます。ch:before:before

    ol {
  counter-reset: ol-num;
  margin: 0;
  padding: 0;
}

ol li {
  counter-increment: ol-num;
  display: table;
  padding: 0.2em 0.4em;
  border-bottom: solid 1px gray;
}

ol li:before {
  content: counter(ol-num) ".";
  display: table-cell;
  width: 2ch; /* approximately two characters wide */
  padding-right: 0.4em;
  text-align: right;
}

/* two digits */
ol li:nth-last-child(n+10):before,
ol li:nth-last-child(n+10) ~ li:before {
  width: 3ch;
}

/* three digits */
ol li:nth-last-child(n+100):before,
ol li:nth-last-child(n+100) ~ li:before {
  width: 4ch;
}
    <ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
</ol>

    于 2016-06-30T22:00:48.067 に答える