글 머리 기호없이 순서가없는 목록이 필요합니다 목록을 만들었습니다. 정렬되지

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

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

답변

부모 요소 (일반적으로 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;