programing

HTML 목록 유형 대시

lastmoon 2023. 8. 5. 10:53
반응형

HTML 목록 유형 대시

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

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

출력:

- abc

저는 이런 것들을 가지고 이것을 해야 한다는 생각이 들었습니다.li:before { content: "-" };비록 저는 그 옵션의 단점을 알지 못하지만 (그리고 피드백에 대해 매우 감사할 것입니다.)

좀 더 일반적으로, 목록 항목에 일반 문자를 사용하는 방법을 알고 있어도 상관 없습니다.

들여쓰기된 목록 효과를 유지하기 위한 쉬운 수정(텍스트 들여쓰기)이 있습니다.: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

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

이전 브라우저에서 작동해야 하는 좀 더 불쾌한 해결책은 글머리 기호에 이미지를 사용하여 이미지를 대시처럼 만드는 것입니다.예는 W3C 페이지를 참조하십시오.

상대적 또는 절대적 위치가 없고 텍스트 들여쓰기가 없는 버전은 다음과 같습니다.

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

즐기세요 ;)

나의 경우 이 코드를 CSS에 추가합니다.

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

충분했습니다.단순한 그대로입니다.

사용:

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}

ul {
  list-style-type: none;
}

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

데모 바이올린

제 버전도 추가하겠습니다. 주로 제가 선호하는 솔루션을 다시 찾을 수 있도록 지원합니다.

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

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

MDN을 참조할 수 있습니다.

상위 답변 중 하나는 저에게 효과가 없었습니다. 왜냐하면 약간의 시행착오 끝에 li:before 또한 css 규칙 표시:inline-block이 필요했기 때문입니다.

그래서 이것은 저에게 완벽하게 효과적인 대답입니다.

ul.dashes{
  list-style: none;
  padding-left: 2em;
  li{
    &:before{
      content: "-";
      text-indent: -2em;
      display: inline-block;
    }
  }
}

ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}

내 바이올린 버전은 다음과 같습니다.

(모더니즘) 계급.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;
}

다른 방법:

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;    
}

오늘날 이러한 문제를 겪고 있는 모든 사용자에게 해결책은 다음과 같습니다.

list-style: "-"

HTML

<ul>
  <li>One</li>
  <li>Very</li>
  <li>Simple</li>
  <li>Approach!</li>
</ul>

CSS

ul {
  list-style-type: none;
}

ul li:before {
  content: '-';
  position: absolute;
  margin-left: -20px;
}`

더 나은 방법이 있을지는 모르겠지만 대시를 나타내는 사용자 지정 글머리 기호 그래픽을 만든 다음 목록 유형 속성과 함께 대시를 사용할 것임을 브라우저에 알릴 수 있습니다.이 페이지의 예는 그래픽을 글머리 기호로 사용하는 방법을 보여줍니다.

저는 당신이 사용하는 방식으로 사용해 본 적이 없습니다. 효과가 있을지는 몰라도요.단점은 일부 이전 브라우저에서는 지원되지 않는다는 것입니다.저의 직감적인 반응은 이것이 여전히 고려할 만큼 충분히 중요하다는 것입니다.미래에는 이것이 그렇게 중요하지 않을 수도 있습니다.

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

제 솔루션은 mdash가 포함된 추가 스팬 태그를 추가하는 것입니다.

<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;
}

CSS:

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

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

HTML:

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

li::marker를 다음과 같이 설정할 수 있습니다.

li::marker {
   content: '- ';
}
  • 키보드에 존재하지 않는 기호를 사용할 때 HTML 엔티티를 참조하고 다음에 대한 CSS 코드 값을 사용합니다.list-style-type소유물.다른 기호는 HTML 문자 엔티티 참조에서 CSS 코드 목록을 참조하십시오.
  • 키보드에 있는 기호의 경우 키보드 기호를 사용하여list-style-type소유물.

아래 코드 예제를 참조하십시오.

<!-- See HTML entities for symbols NOT on the keyboard -->
<h3>HTML Entities: Long Rightwards Double Arrow</h3>
<ul style="list-style-type: '\27F9';">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<!-- Use symbols on the keyboard directly -->
<h3>Dash symbol on the keyboard</h3>
<ul style="list-style-type: '-';">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

루를사용대사신용됨는하리▁used사됨을 사용합니다.dl (definition list) and dd.<dd>다음과 같은 표준 CSS 스타일을 사용하여 정의할 수 있습니다.{color:blue;font-size:1em;}그리고 html 태그 뒤에 어떤 기호를 두든지 마커로 사용합니다.Ulli처럼 작동하지만 아무 기호나 사용할 수 있습니다. 보통 들여쓰기된 목록 효과를 얻으려면 들여쓰기만 하면 됩니다.ul li.

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

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

훨씬 더 깨끗한 코드를 제공합니다!그런 식으로, 여러분은 어떤 종류의 문자라도 마커로 사용할 수 있습니다!는 약 들쓰기의 약여는기 크▁of▁indent들입니다.-10px그리고 완벽하게 작동합니다!

제게 효과가 있었던 것은

<ul>
    <li type= "none">  &ndash; line 1 </li>
    <li type= "none">  &ndash; line 2 </li>
    <li type= "none">  &ndash; line 3 </li>
</ul>

사용하다list-style-type이 회사는 2023년 3월 현재 93%의 전 세계적인 지지를 받고 있습니다.

목록 스타일 유형 CSS 속성은 목록 항목 요소의 마커(예: 디스크, 문자 또는 사용자 지정 카운터 스타일)를 설정합니다.

ul {
 list-style-type: "- "
}

- 뒤에 공백 하나를 추가하는 것을 기억하세요.

enter image description here

레퍼런스

  1. https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
  2. https://caniuse.com/ ?search=list-style-type%3A 문자열

언급URL : https://stackoverflow.com/questions/3200249/html-list-style-type-dash

반응형

'programing' 카테고리의 다른 글

powershell 스크립트 내에서 powershell 스크립트 실행, python이 실행 중에 powershell 출력을 인쇄하도록 하는 방법  (0) 2023.08.05
PL/SQL의 열에 대해 반복  (0) 2023.08.05
다중 경로 값을 사용하는 ASP.NET MVC URL 라우팅  (0) 2023.08.05
개발자 도구를 사용하여 웹킷 입력 자리 표시자 검사  (0) 2023.08.05
자바스크립트의 ++someVariable 대 someVariable++  (0) 2023.08.05

'programing'의 다른글

  • 현재글HTML 목록 유형 대시

관련글

댓글

티스토리툴바