li이 인라인 블록 인 경우 CSS li 글 머리 기호가 표시되지 않음

Question

li을 인라인 블록으로 놓을 때 글 머리 기호가 더 이상 표시되지 않습니다.

ul { 
 
    list-style-type: circle; 
 
} 
 
ul.columns>li { 
 
    display: inline-block; 
 
    padding-right: 1cm; 
 
    margin-left: 20px; 
 
}

<h1>Vertical</h1> 
 
<ul> 
 
    <li><a class="openPage">Besoins en magnésium</a></li> 
 
    <li><a class="openPage">Besoins en azote</a></li> 
 
</ul> 
 

 
<h1>Horizotal is missing bullets</h1> 
 
<ul class="columns"> 
 
    <li><a class="openPage">Besoins en magnésium</a></li> 
 
    <li><a class="openPage">Besoins en azote</a></li> 
 
</ul>

내 바이올린은 http://jsfiddle.net/stephanedeluca/9xdkp3q7/2/

Answer 1

그것은 확실히 그것을하는 가장 좋은 방법이 아니다. 나는 대답이 이미 게시되어 이해하지만, 하나는 절대 위치를 사용하고 내 의견에 전반적으로 덜 효과적이며, 다른 하나는 복잡한 이상 :하지만 ... 이건 정말 다른 결정적인 결과를 가지고 있지 불러

ul.columns>li:before { content:'\ffed'; margin-right:0.5em; } 

편집을 또한 왜 관련 포지셔닝이 필요한지 잘 모르겠습니까? 게다가이 간격은 이미이 방법으로 정렬되어 있습니다. 그리고 그것은 단지 2 가지 속성, 더 간단합니다.

Answer 2

수동으로 :before에 글 머리 기호를 추가 할 수 있습니다 참조 : 사이비 요소.

* { 
 
    font-family: sans-serif; 
 
} 
 
ul { 
 
    list-style-type: circle; 
 
} 
 
ul.columns>li { 
 
    display: inline-block; 
 
    padding-right: 1cm; 
 
    margin-left: 20px; 
 
} 
 
ul.columns>li:before { 
 
    content: '◦'; 
 
    position: relative; 
 
    font-size: 1.3em; 
 
    font-weight: bold; 
 
    top: 1px; 
 
    left: -3px; 
 
}

<h1>Vertical</h1> 
 

 
<ul> 
 
    <li><a class="openPage">Besoins en magnésium</a> 
 
    </li> 
 
    <li><a class="openPage">Besoins en azote</a> 
 
    </li> 
 
</ul> 
 

 
<h1>Horizotal is missing bullets</h1> 
 

 
<ul class="columns"> 
 
    <li><a class="openPage">Besoins en magnésium</a> 
 
    </li> 
 
    <li><a class="openPage">Besoins en azote</a> 
 
    </li> 
 
</ul>

Answer 3

총알 포인트 또는 목록 스타일 아이콘 display: list-item CSS 속성 요소를 적용에만 작동합니다. 이 속성은 기본적으로 li 요소에 적용되며, 이제는 display: inline-block을 적용하여 재정의합니다. 따라서 목록 스타일 아이콘이 사라집니다.

두 개의 li 요소가 서로 인접 해있는 것처럼 보입니다. 음, 그 경우에는 반드시 display: inline-block을 사용해야합니다. 표시가있는 의사 클래스를 list-item으로 사용하십시오. 그것은 당신의 문제를 해결할 것입니다.

ul.columns>li:before{ 
    content: ""; 
    display: list-item; 
    position: absolute; 
} 

Working Fiddle

Answer 4

처음으로 목록을 만들 때 기본값 인 display은 list-item으로 설정됩니다. display: inline-block;으로 변경하면 더 이상 목록 항목으로 인식되지 않습니다. 여기

는 목록에 대한 좋은 정보가 일부 사이트입니다 : - http://www.w3.org/TR/css3-lists/#declaring-a-list-item

-

http://css-tricks.com/almanac/properties/l/list-style/