2

カウンターインクリメントプロパティを使用してリストを注文しました。長いテキストが複数の行に分割されている場合、左から最初の行と同じオフセットを持たせるにはどうすればよいですか? これで、2 行目が数字の下に表示されます。

これがフィドルです(2.3アイテムを見てください): http://jsfiddle.net/1vh1tt81/1/

「li:before」要素で「position: absolute」を使用して目的の結果を得ることができましたが、それが私のプロジェクトに固有の他の問題を引き起こしたため、これは私にとって良い解決策ではありません。

同様の質問がありましたが、マークアップにはタグが追加されていましたが、追加のタグはありません: https://jsfiddle.net/rkmv3rn3/10/

4

3 に答える 3

2

table内側にレイアウトを使用olし、セルをうまく並べます。これでうまくいくと思います。

li > ol > li{ 
  display: table;
}

li > ol > li:before { 
  content: counters(item, ".") ". "; 
  counter-increment: item ;
  display: table-cell;
}

以下のスニペット:

ol {
  counter-reset: item;
  display: table;
}
li {
  display: block;
}
li:before {
  content: counters(item, ".")". ";
  counter-increment: item;
}
li > ol > li {
  display: table-row;
}
li > ol > li:before {
  content: counters(item, ".")". ";
  counter-increment: item;
  display: table-cell;
}
<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text long tex long text
        long tex long text long tex long text long tex</li>
    </ol>
  </li>

</ol>

于 2016-09-02T12:05:12.930 に答える
1

私は通常、カウンターに固定幅と同じ値の負の margin-left を与え、次に LI に同じ padding-left を与えることでこれを解決します:

li { 
  display: block;
  padding-left: 1.75em;
}

li:before { 
  content: counters(item, ".") ". "; 
  counter-increment: item;
  display:inline-block;
  width: 1.75em;
  margin-left: -1.75em;
}

http://jsfiddle.net/1vh1tt81/2/

(項目のインデントがこのフィドルの好みに合わない場合は、OL 要素と LI 要素の残りのデフォルトのマージン/パディングをオーバーライドすることをお勧めします。)

幅が固定されていないと、これを実現するのが難しくなり、おそらく LI コンテンツ用の追加のコンテナー要素が必要になります。
反対要素を通常の流れから外して、LI に対して完全に配置することは、同様の効果を達成するための別のオプションかもしれません。

于 2016-09-02T11:44:19.347 に答える