답변:
다음은 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;
}text-indent: -2ch+ 기호와 그 뒤의 공백을 고려한 다음 padding-right: 1ch해당 공간을 추가하는 것이 좋습니다. 그래도 큰 +1입니다.
너무 많은 솔루션.
하지만 여전히 개선의 여지가 있다고 생각합니다.
장점 :
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>content: url('link-to-my-asset.svg');글 머리 기호와 내용 사이의 이미지 너비와 패딩 을 사용 하고 설정할 수있었습니다 . 감사!
이것이 W3C 솔루션입니다. Firefox 및 Chrome에서 작동합니다.
ul { list-style-type: "🔔"; }
/* Sets the marker to a 🔔 emoji character */http://dev.w3.org/csswg/css-lists/#marker-content
li:before {content:"…";}다른 들여 쓰기 및 정렬없이 사용 하였다.
지금까지 찾은 최고의 솔루션입니다. 훌륭하게 작동하며 크로스 브라우저 (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>목록 항목에 <li>영향을주지 않도록 의 스타일을 한정하는 것이 좋습니다 <ol>. 그래서:
ul {
list-style: none;
margin-left: 0;
padding-left: 0;
}
ul li {
padding-left: 1em;
text-indent: -1em;
}
ul li:before {
content: "+";
padding-right: 5px;
}Font-awesome은 즉시 사용할 수있는 훌륭한 솔루션을 제공합니다.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<ul class='fa-ul'>
<li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
<li><i class="fa-li fa fa-plus"></i> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam</li>
</ul>.list-dash li, .list-bullet li {
position: relative;
list-style-type: none; /* disc circle(hollow) square none */
text-indent: -2em;
}
.list-dash li:before {
content: '— '; /* em dash */
}
.list-bullet li:before {
content: '• '; /*copy and paste a bullet from HTML in browser into CSS (not using ASCII codes) */
}<ul class="list-dash">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>전각 대시 스타일 :
ul.emdash {
list-style-type: none;
list-style-position: inside;
text-indent: -1.25em;
}
ul.emdash > li:before {
content: "\2014\00A0"; /* em dash + space*/
}흥미롭게도 나는 게시 된 솔루션 중 어느 것도 충분하지 않다고 생각합니다. 사용 된 캐릭터가 1em 너비이므로 그렇게 할 필요가 없다는 사실에 의존하기 때문입니다 (하지만 John Magnolia의 답변은 예외이지만 수레를 사용할 수 있습니다. 다른 방식으로 복잡하게 만듭니다). 내 시도는 다음과 같습니다.
ul {
list-style-type: none;
margin-left: 0;
padding-left: 30px; /* change 30px to anything */
text-indent: -30px;
}
ul li:before {
content: "xy";
display: inline-block;
width: 30px;
text-indent: 0;
text-align: center; /* change this for different bullet position */
}<ul>
<li>Item 1</li>
<li>Item 2</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>여기에는 다음과 같은 장점이 있습니다 (다른 솔루션에 비해) :
text-align: center;원하는대로 교체하십시오 . 예를 들어
color: red;
text-align: right;
padding-right: 5px;
box-sizing: border-box;
, 보더 박스를 가지고 노는 것을 좋아하지 않는다면 너비에서 패딩 (5px)을 빼십시오 (예 :이 예에서는 width : 25px). 많은 옵션이 있습니다.즐겨.
.single-before {
list-style: "👍";
list-style-position: outside!important;
}<ul class="single-before">
<li> is to manifest perfection already in man.</li>
<li> is to bring out the best facets of our students personalities.</li>
</ul>!importantBlogspot에서 내 사용자 정의 CSS가 작동하도록하는 데
이 시도
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>