html - 하는 - 순서 가 있는 리스트 에 공통적 으로 스타일 을 적용




글 머리 기호없이 정렬되지 않은 목록 필요 (18)

정렬되지 않은 목록을 만들었습니다. 정렬되지 않은 목록의 총알이 너무 귀찮아서 제거하고 싶습니다.

총알이없는 목록을 가질 수 있습니까?


CSS :

.liststyle {
    list-style-type: none;
}

HTML :

<ul class="liststyle">
    <li>Test</li>
</ul>

CSS 코드

ul
{
list-style-type: none;
}

HTML 코드

<ul>
<li><a href="#">Item One</a></li>
<li><a href="#">Item Two</a></li>   
</ul>

CSS로 ...

ul {
   list-style:none;
}

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

ul {
  list-style-type: none;
}


내가 시도하고 관찰 한 것은

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

다음 CSS 를 사용하여 글 머리 기호 를 제거 할 수 있습니다.

    ul {
         list-style: none; //or list-style-type:none; 
       }

다음과 같이 사용자 정의 목록 스타일을 추가 할 수도 있습니다.

li:before {
            content: '✔';
            color:red;
          }

다음과 같이 <ul> 요소에 스타일을 추가해야합니다.

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

총알이 제거됩니다. 위의 예와 같이 스타일 시트에 CSS를 추가 할 수도 있습니다.


당신도 이것을 할 수 있습니다.

ul {
  display: initial;
}


아래 코드는 정렬되지 않은 목록에 대해 글 머리표를 제거하는 좋은 예제입니다.

<!DOCTYPE html>
<html>
<body>

<h2>Unordered List without Bullets</h2>

<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

</body>
</html>

위의 작은 미세 조정 : 추가 선이 화면 선으로 넘치면 긴 선을 더 읽기 쉽도록 만들려면 다음을 수행하십시오.

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

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

이 명령은 글 머리 기호없이 세로로 정렬됩니다. 한 줄에!

 li{
        display: block;
    }

<li> 클래스의 list-style list-style-type 또는 list-stylenone 으로 변경하십시오.

이 같은:

li {
  list-style-type : none;
}

또한 추가 정보를 위해 list-style-type 지정할 수있는 모든 속성을 list-style-type 하고 아래 코드를 실행하여 모든 결과를 한 가지 목표로 봅니다.

.none {
  list-style-type: none;
}

.disc {
  list-style-type: disc;
}

.circle {
  list-style-type: circle;
}

.square {
  list-style-type: square;
}

.decimal {
  list-style-type: decimal;
}

.georgian {
  list-style-type: georgian;
}

.cjk-ideographic {
  list-style-type: cjk-ideographic;
}

.kannada {
  list-style-type: kannada;
}

.custom:before {
  content: '◊ ';
  color: red;
}
<ul>
  <li class="none">none</li>
  <li class="disc">disc</li>
  <li class="circle">circle</li>
  <li class="square">square</li>
  <li class="decimal">decimal</li>
  <li class="georgian">georgian</li>
  <li class="cjk-ideographic">cjk-ideographic</li>
  <li class="kannada">kannada</li>
  <li class="none custom">custom</li>
</ul>


<ul> 수준에서 작동하지 않으면 list-style-type: none; 해야 할 수도 있습니다 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>

style="list-style-type:none" 사용하여 글 머리 기호를 제거 할 수 있습니다.

이 시도:

<ul style="list-style-type:none" >

     <li>op1</li>
     <li>op2</li>
     <li>op2</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>

그러면 다음과 비슷한 목록이 생성됩니다.

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


원주민:

ul { list-style-type: none; }

부트 스트랩 :

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

참고 : 목록 그룹을 사용하는 경우 list-unstyled가 필요하지 않습니다.


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

ul {
  list-style-type: none;
}

들여 쓰기를 제거하려는 경우 padding: 0margin: 0 으로 추가 할 수도 있습니다.

목록 형식화 기법을 자세히 설명하는 Listutorial 을 참조하십시오.







css