글머리 기호가 없는 순서 없는 목록이 필요합니다.

질문자 :praveenjayapal

정렬되지 않은 목록을 만들었습니다. 정렬되지 않은 목록의 글머리 기호가 귀찮은 것 같아서 제거하고 싶습니다.

글머리 기호 없이 목록을 가질 수 있습니까?

예를 들어 다음과 같이 부모 요소(일반적으로 <ul> list-style-type 을 none 으로 설정하여 글머리 기호를 제거할 수 있습니다.

 ul { list-style-type: none; }

들여쓰기도 제거하려면 padding: 0 및 margin: 0 을 추가할 수도 있습니다.

목록 형식화 기술에 대한 훌륭한 연습은 Listutorial 을 참조하십시오.

Paul Dixon

Bootstrap을 사용하는 경우 "스타일이 지정되지 않은" 클래스가 있습니다.

목록 항목의 기본 목록 스타일과 왼쪽 패딩을 제거합니다(직계 자식만 해당).

부트스트랩 2:

 <ul class="unstyled"> <li>...</li> </ul>

http://twitter.github.io/bootstrap/base-css.html#typography

부트스트랩 3 및 4:

 <ul class="list-unstyled"> <li>...</li> </ul>

부트스트랩 3: http://getbootstrap.com/css/#type-lists

부트스트랩 4: https://getbootstrap.com/docs/4.3/content/typography/#unstyled

부트스트랩 5: https://getbootstrap.com/docs/5.0/content/typography/#unstyled

Scott Stafford

목록 스타일을 사용해야 list-style: none;

 <ul style="list-style: none;"> <li>...</li> </ul>

karim79

이전 답변에 대한 약간의 개선: 더 긴 줄이 추가 화면 줄로 넘어가는 경우 더 읽기 쉽게 만들기:

 ul, li {list-style-type: none;} li {padding-left: 2em; text-indent: -2em;}

charliehoward

<ul> 수준에서 작동하도록 할 수 없다면 list-style-type: none; 을 배치해야 할 수도 있습니다. <li> 수준에서:

 <ul> <li style="list-style-type: none;">Item 1</li> <li style="list-style-type: none;">Item 2</li> </ul>

이 반복을 피하기 위해 CSS 클래스를 만들 수 있습니다.

 <style> ul.no-bullets li { list-style-type: none; } </style> <ul class="no-bullets"> <li>Item 1</li> <li>Item 2</li> </ul>

필요한 경우 !important 사용하십시오.

 <style> ul.no-bullets li { list-style-type: none !important; } </style>

Antonio Ooi

총알을 제거하기 위해 ul과 li 모두에 list-style 을 사용했습니다. 총알을 사용자 지정 문자(이 경우 '대시')로 교체하고 싶었습니다. 그러면 텍스트가 줄 바꿈될 때 제대로 작동하는 멋지게 들여쓰기된 효과가 나타납니다.

 ul.dashed-list { list-style: none outside none; } ul.dashed-list li:before { content: "\2014"; float: left; margin: 0 0 0 -27px; padding: 0; } ul.dashed-list li { list-style-type: none; }

 <ul class="dashed-list"> <li>text</li> <li>text</li> </ul>

Chris Halcrow

ul 기본 스타일을 완전히 제거하려면:

 list-style-type: none; margin: 0; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; padding-inline-start: 0;

Masih Jahangiri

순수 HTML만으로 이 작업을 수행하려는 경우 이 솔루션은 모든 주요 브라우저에서 작동합니다.

설명 목록

다음 HTML을 사용하기만 하면 됩니다.

 <dl> <dt>List Item 1</dt> <dd>Sub-Item 1.1</dd> <dt>List Item 2</dt> <dd>Sub-Item 2.1</dd> <dd>Sub-Item 2.2</dd> <dd>Sub-Item 2.3</dd> <dt>List Item 3</dt> <dd>Sub-Item 3.1</dd> </dl>

예: https://jsfiddle.net/zumcmvma/2/

여기 참조: https://www.w3schools.com/tags/tag_dl.asp

ShaneB

이것은 글머리 기호 없이 세로로 목록을 정렬합니다. 단 한 줄로!

 li { display: block; }

matt

ul{list-style-type:none;}

정렬되지 않은 목록의 스타일을 없음으로 설정하기만 하면 됩니다.

Abuhanzala Rehanansari

기존 테마를 개발하는 경우 테마에 사용자 지정 목록 스타일이 있을 수 있습니다.

list-style: none; 사용하여 목록 스타일을 변경할 수 없는 경우: 없음; ul 또는 li 태그에서 먼저 !important 확인하십시오. 다른 스타일 라인이 귀하의 스타일을 덮어쓰고 있을 수 있기 때문입니다. !important 했다면 더 구체적인 선택기를 찾아 !important 지워야 합니다.

 li { list-style: none !important; }

그렇지 않은 경우 li:before 를 확인하십시오. 콘텐츠가 포함된 경우 다음을 수행합니다.

 li:before { display: none; }

Ali_Hr

::marker 의사 요소를 사용하여 숨길 수 있습니다.

1. 투명 ::marker

---

 ul li::marker { color: transparent; } 

 ul li::marker { color: transparent; } ul { padding-inline-start: 10px; /* Just to reset the browser initial padding */ }

 <ul> <li> Bullets are bothersome </li> <li> I want to remove them. </li> <li> Hey! ::marker to the rescue </li> </ul>

2. ::marker 빈 내용

---

 ul li::marker { content: ""; } 

 ul li::marker { content: ""; }

 <ul> <li> Bullets are bothersome </li> <li> I want to remove them </li> <li> Hey! ::marker to the rescue </li> </ul>

특정 목록 항목에서 글머리 기호를 제거해야 할 때 더 좋습니다.

 ul li:nth-child(n)::marker { /* Replace n with the list item's position*/ content: ""; } 

 ul li:not(:nth-child(2))::marker { content: ""; }

 <ul> <li> Bullets are bothersome </li> <li> But I can live with it using ::marker </li> <li> Not again though </li> </ul>

m4n0

li{ list-style: none; }

모든 목록 항목에서 글머리 기호를 제거합니다.

Rupak

것이 가능하다. <style> 요소 또는 CSS 파일에서 글머리 기호 없이 정렬되지 않은 목록을 만드는 것은 다음과 같습니다.

 ul { list-style-type: none; }

물론 ID와 클래스도 추가할 수 있습니다.

Alan Bagel

 <div class="custom-control custom-checkbox left"> <ul class="list-unstyled"> <li> <label class="btn btn-secondary text-left" style="width:100%;text-align:left;padding:2px;"> <input type="checkbox" style="zoom:1.7;vertical-align:bottom;" asp-for="@Model[i].IsChecked" class="custom-control-input" /> @Model[i].Title </label> </li> </ul> </div>

Oracular Man

나는 시도하고 관찰했다:

 header ul { margin: 0; padding: 0; }

Dadhich Sourav

CSS에 의존하지 않고 간단하게 유지하려면   내 코드 라인에서. 즉, <table></table> .

네, 약간의 공백이 있지만 나쁘지 않습니다.

Phil

출처 : http:www.stackoverflow.com/questions/1027354/i-need-an-unordered-list-without-any-bullets