[html] 이미지가 아닌 일반 문자 인 <ul>의 <li> 요소에 대한 사용자 정의 글 머리 기호 기호

Html / 글쓴이

CSS 속성을 사용하여 사용자 정의 그래픽을 대체 글 머리 기호 문자로 지정할 수 있음을 알고 있습니다.

list-style-image

그런 다음 URL을 제공합니다.

그러나 제 경우에는 ‘+’기호를 사용하고 싶습니다. 이를 위해 그래픽을 만든 다음 가리킬 필요가 없습니다. 차라리 순서가 지정되지 않은 목록에 더하기 기호를 총알 기호로 사용하도록 지시하고 싶습니다.

이 작업을 수행 할 수 있습니까? 아니면 먼저 그래픽으로 만들어야합니까?

답변

다음은 Taming Lists 에서 인용 한 것입니다 .

목록이 있지만 총알이 필요하지 않거나 총알 대신 다른 문자를 사용하려는 경우가있을 수 있습니다. 다시 말하지만 CSS는 간단한 솔루션을 제공합니다. 목록 스타일을 추가하기 만하면됩니다. none; 규칙에 따라 LI가내어 쓰기로 표시되도록합니다. 규칙은 다음과 같습니다.

ul {
   list-style: none;
   margin-left: 0;
   padding-left: 1em;
   text-indent: -1em;
}

패딩 또는 여백은 0으로 설정하고 다른 하나는 1em으로 설정해야합니다. 선택한 “글 머리 기호”에 따라이 값을 수정해야 할 수 있습니다. 음수 텍스트 들여 쓰기를 사용하면 첫 번째 줄이 해당 양만큼 왼쪽으로 이동하여내어 쓰기가 생성됩니다.

HTML에는 표준 UL이 포함되지만 목록 항목의 내용 앞에있는 글 머리 기호 대신 사용할 문자 또는 HTML 엔티티가 포함됩니다. 이 경우 오른쪽 큰 따옴표 인»를 사용합니다 :».

»항목 1
»항목 2
»항목 3
»항목 4
»항목 5
   포장
   을 위해 조금 더 길게 만들겠습니다.

답변

이것은 늦은 대답이지만 방금 이것을 발견했습니다 … 줄 바꿈하는 줄에 올바른 들여 쓰기를 얻으려면 다음과 같이 시도하십시오.

ul {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}

li {
  padding-left: 1em;
  text-indent: -1em;
}

li:before {
  content: "+";
  padding-right: 5px;
}

답변

너무 많은 솔루션.
하지만 여전히 개선의 여지가 있다고 생각합니다.

장점 :

  • 매우 간결한 코드
  • 모든 글꼴 크기에서 작동
    (절대 픽셀 값이 포함되지 않음)
  • 행을 완벽하게 정렬
    (첫 번째 줄과 다음 줄 사이에 약간의 이동 없음)
ul {
	position: relative;
	list-style: none;
	margin-left: 0;
	padding-left: 1.2em;
}
ul li:before {
	content: "+";
	position: absolute;
	left: 0;
}
<ul>
  <li>Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus.</li>
  <li>Nulla porttitor accumsan tincidunt. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.</li>
</ul>

스 니펫 확장

답변

이것이 W3C 솔루션입니다. Firefox 및 Chrome에서 작동합니다.

ul { list-style-type: "?"; }
/* Sets the marker to a ? emoji character */

http://dev.w3.org/csswg/css-lists/#marker-content

ul { list-style-type: "? "; }
  <ul><li>item</li></ul>

스 니펫 확장

답변

지금까지 찾은 최고의 솔루션입니다. 훌륭하게 작동하며 크로스 브라우저 (IE 8+)입니다.

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

li:before {
    content: "►";
    display: block;
    float: left;
    width: 1.2em;
    color: #ff0000;
}

중요한 것은 텍스트가 너무 길어서 한 줄에 맞지 않는 경우 텍스트가 정렬 된 상태로 유지되도록 고정 너비의 부동 블록에 문자를 포함하는 것입니다.
1.2em 은 캐릭터에 대해 원하는 너비이며 필요에 따라 변경하십시오.

답변

:before의사 선택기를 사용 하여 목록 항목 앞에 콘텐츠를 삽입 할 수 있습니다 . http://www.quirksmode.org/css/beforeafter.html 에서 Quirksmode에서 예제를 찾을 수 있습니다 . 나는 이것을 블록 따옴표 주위에 거대한 따옴표를 삽입하는 데 사용합니다 …

HTH.

답변

내 솔루션은 배치를 사용하여 줄 바꿈을 자동으로 올바르게 정렬합니다. 따라서 li : before에서 padding-right를 설정하는 것에 대해 걱정할 필요가 없습니다.

ul {
  margin-left: 0;
  padding-left: 0;
  list-style-type: none;
}

ul li {
  position: relative;
  margin-left: 1em;
}

ul li:before {
  position: absolute;
  left: -1em;
  content: "+";
}
<ul>
  <li>Item 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

스 니펫 확장