총알이 없는 순서 없는 목록이 필요합니다.

총알이 없는 순서 없는 목록이 필요합니다.

주문하지 않은 목록을 만들었습니다.주문하지 않은 목록에 있는 총알들이 귀찮아서 제거하고 싶습니다.

총알이 없는 리스트가 가능합니까?

를 로 설정하여 글머리 기호를 제거할 수 있습니다.none부모 요소에 대한 CSS(일반적으로 a)<ul>), 예:

ul {
  list-style-type: none;
}

추가할 수도 있습니다.padding: 0그리고.margin: 0또한 들여쓰기를 제거하려는 경우에도 마찬가지입니다.

목록 형식 지정 기법에 대한 자세한 내용은 목록 자습서를 참조하십시오.

부트스트랩을 사용하는 경우 "스타일링되지 않은" 클래스가 있습니다.

목록 항목의 기본 목록 스타일 및 왼쪽 패딩을 제거합니다(즉시 하위 항목만 해당).

부트스트랩 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/ #bootsylled

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

사용해야 합니다.list-style: none;

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

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

ul, li {list-style-type: none;}

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

만약 당신이 그것을 작동시킬 수 없다면.<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>

사용한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>

순수 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

이렇게 하면 글머리 기호가 없는 목록이 수직으로 정렬됩니다.한 줄로!

li {
    display: block;
}

시스템을 완전히 제거하려면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;

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

따라서 목록 스타일을 변경할 수 없는 경우list-style: none;ul 또는 li 태그에서, 먼저 확인합니다.!important다른 스타일이 당신의 스타일을 덮어쓰는 것일 수도 있기 때문입니다.한다면!important그것을 고쳤습니다, 당신은 더 구체적인 선택기를 찾고 그것을 제거해야 합니다.!important.

li {
    list-style: none !important;
}

그렇지 않은 경우에는 다음을 확인합니다.li:before내용이 포함된 경우 다음을 수행합니다.

li:before {
    display: none;
}

유사 요소를 사용하여 이러한 요소를 숨길 수 있습니다.

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>

BOOTSTRAP에서 목록의 부모 클래스에 목록 스타일이 없는 클래스를 설정하여 글머리 기호를 제거할 수 있습니다.

<ul className="list-unstyled">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

ul{list-style-type:none;}

순서가 지정되지 않은 목록의 스타일을 설정하기만 하면 됩니다.

저는 시도했고 관찰했습니다.

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

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

만약 당신이 CSS에 의존하지 않고 일을 단순하게 유지하고 싶다면, 나는 그냥. 내 코드 라인에서. 예.,<table></table>.

네, 몇 개의 공간을 남기기는 하지만, 그것은 나쁜 것은 아닙니다.

언급URL : https://stackoverflow.com/questions/1027354/i-need-an-unordered-list-without-any-bullets