HTML 목록 스타일 형식 대시

222

대시 (예 :-또는 – –또는 — —) 를 사용하여 HTML로 목록 스타일을 만드는 방법이 있습니까?

<ul>
  <li>abc</li>
</ul>

출력 :

- abc

li:before { content: "-" };나는 그 옵션의 단점을 알지 못하지만 (그리고 피드백을 받아야 할 의무가 있지만) 와 같은 것을 사용 하여이 작업을 수행했습니다 .

더 일반적으로, 나는 목록 항목에 일반 문자를 사용하는 방법을 알고 싶지 않습니다.

html  css  xhtml  html-lists 
— 브라이언 엠 헌트
소스
79
대시가 목록에 일반적으로 사용되므로 왜 기본적으로 CSS에 포함되지 않습니까?
— temirbek
101
더 중요한 것은 왜 아르메니아 번호와 가타카나가 있는데 왜 대시가 아닌가?
— Henry C

답변:

108

당신은 사용할 수 있습니다 :before및 content:이 아래 IE 7에서 지원되지 않는다는 것을 명심. 괜찮다면 이것이 최선의 해결책입니다. 자세한 내용은 Can I Use 또는 QuirksMode CSS 호환성 표를 참조하십시오.

구형 브라우저에서 작동해야하는 약간 더 나쁘지 않은 솔루션은 글 머리 기호에 이미지를 사용하고 이미지를 대시처럼 보이게 만드는 것입니다. 예제 는 W3C list-style-image페이지 를 참조하십시오 .

— Darko Z
소스
27
문제 :before는 목록 항목이 여러 줄에 걸쳐있을 때 두 번째 줄의 들여 쓰기가 대시가있는 위치에서 시작되어 들여 쓰기 된 목록 효과가 손상된다는 것입니다. 이를 피하려면 매달린 들여 쓰기를 사용해야합니다. 참조 : alistapart.com/articles/taminglists
— chiborg
3
mdash를 content사용하려면content: "\2014\a0"
— Ivan Z
더 일반적이고 덜 장황한 @three의 답변을 참조하십시오!
— 벤 Vertonghen
221

:before의사 클래스로 들여 쓰기 된 목록 효과를 유지하는 쉬운 수정 (텍스트 들여 쓰기)이 있습니다.

ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}
Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text
스 니펫 확장

— aron.lakatos
소스
14
작동하지만를 넣어하는 것을 잊지 마세요 list-style-type: none;받는 <ul>요소입니다.
— toesslab
5
들여 쓰기없이ul li:before{ content:"- ";}
— Qlimax
4
콘텐츠 흐름에서 더 쉽게 가져올 수있는 추가 display: block; float: left;를 선호합니다 li:before. 그렇지 않으면 첫 번째 및 후속 줄을 올바르게 정렬하는 것이 매우 어렵습니다. 또는 Keyan Zhang의 대답은 절대 위치 지정으로도 수행합니다.
— Simon East
8
list-style-type dashCSS의 일부가 아닌 꽤 바보
— Pixelomo
제안한 것과 비슷한 HTML 전용 솔루션은 무엇입니까?
— 플루 톤
74

상대 또는 절대 위치가없고 텍스트 들여 쓰기가없는 버전이 있습니다.

ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}
ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}

즐겨 ;)

— velop
소스
1
큰! 'ul.dash> li : before'를 제안합니다. 그렇지 않으면 내면의 엉망이 엉망이됩니다.
— w.stoettinger
1
콘텐츠 흐름에서 더 쉽게 가져올 수있는 추가 display: block; float: left;를 선호합니다 li:before. 그렇지 않으면 첫 번째 및 후속 줄을 올바르게 정렬하는 것이 매우 어렵습니다. 또는 Keyan Zhang의 대답은 절대 위치 지정으로도 수행합니다.
— Simon East
나는 이것을 네비게이션 .active클래스로 사용 li:before { visibility: hidden; }하고li.active:before { visibility: visible; }
— sshow
최고의 제안 imo!
— 벤 Vertonghen
64

이것을 사용하십시오 :

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}
— 제스
소스
3
불행히도 CSS 텍스트의 색상을 존중하지 않습니다.
— Hereblur
7
이메일을위한 유일한 솔루션
— Oleg
현재 Gmail (2018 년 11 월)과 Outlook 2016 모두에서 작동하지 않습니다.
— user2875289
33 
ul {
  list-style-type: none;
}

ul > li:before {
  content: "–"; /* en dash */
  position: absolute;
  margin-left: -1.1em; 
}

데모 바이올린

— 키안 장
소스
25

내 자신의 선호하는 솔루션을 다시 찾기 위해 내 버전도 추가하겠습니다.

ul {
  list-style-type: none;
  /*use padding to move list item from left to right*/
  padding-left: 1em;
}

ul li:before {
  content: "–";
  position: absolute;
  /*change margin to move dash around*/
  margin-left: -1em;
}
<!-- 
Just use the following CSS to turn your
common disc lists into a list-style-type: 'dash' 
Give credit and enjoy!
-->
Some text
<ul>
  <li>One</li>
  <li>Very</li>
  <li>Simple Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
  <li>Approach!</li>
</ul>
스 니펫 확장

https://codepen.io/burningTyger/pen/dNzgrQ

— 세
소스
지금까지 최고의 솔루션 IMHO. 공유를위한 Thx!
— 악셀
14

내 경우에는이 코드를 CSS에 추가

ul {
    list-style-type: '- ';
}

충분했다. 그대로 간단합니다.

— 앨버트 소스 노프 스키
소스
1
CSS를 언급하는 다른 답변을 찾을 수 없기 때문에 이것이 CSS에 상대적으로 새로운 추가라고 가정하지만, 요즘에는 실제로 받아 들여야합니다.
— ahstro
4
데스크톱 Firefox에서만 지원되는 것 같습니다 : developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
— dave
이것은 현재 Chrome에서도 지원됩니다 (79 생각에 chromestatus.com/feature/5893875400966144 및 caniuse.com/#feat=mdn-css_properties_list-style-type_string
— Alex
9

약간의 시행 착오 후에 li : 이전에도 CSS 규칙 표시 : 인라인 블록이 필요했기 때문에 최고의 답변 중 하나가 저에게 효과가 없었습니다.

그래서 이것은 나를 위해 완전히 작동하는 대답입니다.

ul.dashes{
  list-style: none;
  padding-left: 2em;
  li{
    &:before{
      content: "-";
      text-indent: -2em;
      display: inline-block;
    }
  }
}
— 조리
소스
이것은 LESS / SASS로 작성되었습니다.
— Arslan Ameer
7 
ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}
— 사용자 3849374
소스
아마```ul {margin : 0; 리스트 스타일 유형 : 없음; } ul li : before {content : "-";}```그렇지 않으면 그것은 ol 목록에도 영향을 미칩니다
— Sasha Bond
5

여기, 내 것이요 바이올린 버전 .

(모더 나이저) 클래스 .generatedcontent에<html>실제로 실제로 IE8 + 및 다른 모든 제정신 브라우저를 의미합니다.

<html class="generatedcontent">
  <ul class="ul-dash hanging">
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
  </ul>

CSS :

.ul-dash {
  margin: 0;
}

.ul-dash {
  margin-left: 0em;
  padding-left: 1.5em;
}

.ul-dash.hanging > li { /* remove '>' for IE6 support */
  padding-left: 1em;
  text-indent: -1em;
}  

.generatedcontent .ul-dash {
  list-style: none;
}
.generatedcontent .ul-dash > li:before {
  content: "–";
  text-indent: 0;
  display: inline-block;
  width: 0;
  position: relative;
  left: -1.5em;
}
— Biziclop
소스
3

더 좋은 방법이 있는지 모르겠지만 대시를 나타내는 사용자 정의 글 머리 기호 그래픽을 만든 다음 목록 스타일 목록을 사용하여 브라우저에서 사용하고 싶다고 브라우저에 알릴 수 있습니다 속성 . 해당 페이지의 예는 그래픽을 글 머리 기호로 사용하는 방법을 보여줍니다.

나는 당신이 가지고있는 방식으로 작동하기 전에 사용하려고 시도하지 않았습니다. 단점은 일부 구형 브라우저에서는 지원되지 않는다는 것입니다. 내 직감은 이것이 여전히 고려하기에 충분히 중요하다는 것입니다. 앞으로는 그렇게 중요하지 않을 수 있습니다.

편집 : OP의 접근 방식으로 약간의 테스트를 수행했습니다. IE8에서는이 기술을 사용할 수 없으므로 아직 브라우저 간이 아닙니다. 또한 Firefox 및 Chrome에서 list-style-type을 none으로 설정하면 무시되는 것으로 보입니다.

— TNi
소스
3

내 솔루션은 mdash가있는 여분의 span 태그를 추가하는 것입니다.

<ul class="mdash-list">
    <li><span class="mdash-icon">&mdash;</span>ABC</li>
    <li><span class="mdash-icon">&mdash;</span>XYZ</li>
</ul>

그리고 CSS에 추가 :

ul.mdash-list 
{
    list-style:none;
}

ul.mdash-list  li
{
    position:relative;
}

ul.mdash-list li .mdash-icon
{
    position:absolute;
    left:-20px;
}
— 빅터 스타 구로프
소스
3

또 다른 방법:

li:before {
  content: '\2014\00a0\00a0'; /* em-dash followed by two non-breaking spaces*/
}
li {
  list-style: none;
  text-indent: -1.5em;
  padding-left: 1.5em;    
}
— 이모 스
소스
3

CSS :

li:before {
  content: '— ';
  margin-left: -20px;
}

li {
  margin-left: 20px;
  list-style: none;
}

HTML :

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>
— 검은 밤
소스
1
이것은 하나 이상의 라인에 걸쳐있는 항목에는 적용되지 않습니다
— jenlampton
2

lu li을 사용하는 대신을 사용했습니다 dl (definition list) and dd. <dd>는 표준 CSS 스타일을 사용하여 정의 할 수 있으며 {color:blue;font-size:1em;}html 태그 뒤에 배치 할 기호를 마커로 사용합니다. 그것은 ul li처럼 작동하지만 모든 기호를 사용할 수 있습니다 ul li. 일반적으로 사용하는 들여 쓰기 목록 효과를 얻으려면 들여 쓰기 만하면됩니다 .

CSS:
dd{text-indent:-10px;}

HTML
<dl>
<dd>- One</dd>
<dd>- Two</dd>
<dd>- Three</dd></dl>

더 깨끗한 코드를 제공합니다! 이렇게하면 모든 유형의 문자를 마커로 사용할 수 있습니다! 들여 쓰기가 완료 -10px되었으며 완벽하게 작동합니다!

— 캐롤린 Comtois
소스
7
이것은 두 가지 이유로 매우 나쁩니다. 먼저 글 머리 기호 문자를 텍스트에 직접 넣고 내용과 스타일을 혼합합니다. 둘째, dl 요소를 잘못 사용하고 있습니다 . 올바른 사용법 에 대한 기사가 있습니다 .
— mzgajner
1

오늘날이 문제가있는 사람은 해결책은 다음과 같습니다.

목록 스타일 : "-"

— 꿀벌 박쥐
소스
-1

나를 위해 일한 것은 

<ul>
    <li type= "none">  &ndash; line 1 </li>
    <li type= "none">  &ndash; line 2 </li>
    <li type= "none">  &ndash; line 3 </li>
</ul>
— C 오네 일
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.