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

정렬되지 않은 목록을 만들었습니다. 정렬되지 않은 목록의 글 머리 기호가 번거롭기 때문에 제거하고 싶습니다.

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

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

ul {
  list-style-type: none;
}

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

목록 서식 기술에 대한 자세한 내용은 Listutorial 을 참조하십시오 .

부트 스트랩을 사용하는 경우 "스타일이없는"클래스가 있습니다.

목록 항목에서 기본 목록 스타일과 왼쪽 여백을 제거하십시오 (즉시 하위 만 해당).

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

당신은 사용해야합니다 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>

나는 총알을 제거하기 위해 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>

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;

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

다음과 유사한 목록이 생성됩니다.

List Item 1
     Sub-Item 1.1
List Item 2
     Sub-Item 2.1
     Sub-Item 2.2
     Sub-Item 2.3
List Item 3
     Sub-Item 3.1

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

여기를 참조하십시오 : https://www.w3schools.com/tags/tag_dl.asp

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

li {
    display: block;
}

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

list-style: none;ul 또는 li 태그를 사용하여 목록 스타일을 변경할 수없는 경우 먼저 !important다른 스타일의 줄이 스타일을 덮어 쓰고 있기 때문에 확인하십시오 .

그렇지 않은 경우 li:before내용이 있는지 확인하십시오 . 그런 다음 수행하십시오.

li:before { dispaly: none; }

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

나는 시도하고 관찰했다.

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

CSS에 의존하지 않고 일을 단순하게 유지하려면  코드 줄에 넣습니다 . 즉 <table></table>.

예, 약간의 공백이 남지만 나쁜 것은 아닙니다.