> 웹 프론트엔드 > CSS 튜토리얼 > CSS만 사용하여 선행 점이 있는 목차를 만드는 방법은 무엇입니까?

CSS만 사용하여 선행 점이 있는 목차를 만드는 방법은 무엇입니까?

DDD
풀어 주다: 2024-12-21 12:23:09
원래의
304명이 탐색했습니다.

How to Create a Table of Contents with Leading Dots Using Only CSS?

CSS에서 목차 선행 점 생성

목차를 생성할 때 선행 점을 사용하여 목차를 생성하는 것이 바람직한 경우가 많습니다. 체계적이고 시각적으로 매력적인 레이아웃. 이를 달성하기 위한 효과적인 CSS 전용 솔루션은 다음과 같습니다.

CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

ul.leaders {

  max-width: 40em;

  padding: 0;

  overflow-x: hidden;

  list-style: none;

}

 

ul.leaders li:before {

  float: left;

  width: 0;

  white-space: nowrap;

  content:

    ". . . . . . . . . . . . . . . . . . . . "

    ". . . . . . . . . . . . . . . . . . . . "

    ". . . . . . . . . . . . . . . . . . . . "

    ". . . . . . . . . . . . . . . . . . . . ";

}

 

ul.leaders span:first-child {

  padding-right: 0.33em;

  background: white;

}

 

ul.leaders span + span {

  float: right;

  padding-left: 0.33em;

  background: white;

}

로그인 후 복사

HTML:

1

2

3

4

5

6

7

<ul class="leaders">

  <li><span>Salmon Ravioli</span> <span>7.95</span></li>

  <li><span>Fried Calamari</span> <span>8.95</span></li>

  <li><span>Almond Prawn Cocktail</span> <span>7.95</span></li>

  <li><span>Bruschetta</span> <span>5.25</span></li>

  <li><span>Margherita Pizza</span> <span>10.95</span></li>

</ul>

로그인 후 복사

이 코드는 앞에 점을 사용하여 유연하고 시각적으로 즐거운 목차를 만듭니다. 콘텐츠의 크기가 동적으로 조정되므로 텍스트 길이에 관계없이 일관된 간격이 보장됩니다.

위 내용은 CSS만 사용하여 선행 점이 있는 목차를 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿