아무래도 7note입니다. 리스트 마크가 아래로 어긋나는 원인과 대책

<li> 태그에 사용하는 list-style-type(리스트 마크)이 아래로 어긋나는 일이 있습니다.



분명히 점(・)의 위치가 이상하네요.
본래라면, 1행째의 좌측에 점(・)을 배치해 주었으면 합니다만, 아래로 어긋나 버리고 있습니다.
해결책 앞에 이렇게 되는 원인의 소스를 살펴보겠습니다.

원인 소스

index.html

<ul>
  <li><span>長いテキスト。長いテキスト。長いテキスト。長いテキスト。長いテキスト。長いテキスト。長いテキスト。</span></li>
  <li><span>長いテキスト。長いテキスト。長いテキスト。長いテキスト。長いテキスト。長いテキスト。長いテキスト。</span></li>
</ul>

style.css

li {
  list-style-type: disc; /* リストマーク（※初期値） */
}
li span {
  display: inline-block; /* こいつが原因 */
}

li 안의 요소가 인라인 블록 요소인 경우 리스트마크(・)의 위치가 어긋나 버리는 것 같습니다.
간단한 것은 span을 인라인 블록 요소로 만들어야 합니다만, 할 수 없는 경우는 다른 방법으로 점(・)을 붙이자.

해결 방법

방법 ① li의 자식 요소를 인라인 블록으로 만들지 않음

방법② list-style-type: disc; 를 사용하지 않고 리스트 마크를 붙인다

style.css

li {
  list-style: none;
}
li span {
  display: inline-block;
  text-indent: 1em;
}
li span::before {
  content: "・ ";
}

의사 요소를 사용하여 목록 표시를 대체할 점(·)을 만듭니다.
before로 지정하면 텍스트의 시작 부분에 문자를 추가 할 수 있으므로 text-indent와 함께 사용하면
첫 번째 행의 왼쪽에 점(·)을 배치할 수 있습니다.

요약

HTML과 CSS 초보자의 무렵은 모르는 것이 정말 많기 때문에, 오로지 구구리마쿠루 밖에 없습니다.
만약 들을 수 있는 사람이 있으면 주위의 사람에게 듣는 것도 좋습니다.

그래도 모르는 경우 브라우저의 검증 도구 (F12 키)를 사용하여 의심스러운 요소와 CSS를 조금씩 지우는 것이 좋습니다.

그렇게 원인을 특정하는 힘도 WEB 제작자에게 필수 스킬이 됩니다!

어머니!

~ Qiita에서 매일 게시 중!! ~
【초보자용】WEB 제작의 조금 테크 모임