2017-03-09 7 views
0

이 질문은 간단한 질문 일뿐입니다.글 머리 기호가 표시되지 않습니다.

저는 li이있는 ul이 있습니다. 여기에 글 머리 기호를 사용하고 싶지만, CSS에 포함 시켰지만 표시되지 않습니다.

HTML은 그 다음과 같습니다

<?php 
    session_start(); 
    if (!isset($_SESSION["email"])) { 
    header('Location: ../login_error.php'); 
    exit; 
    } 
?> 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>The A Room</title> 
<link type="text/css" rel="stylesheet" href="../../login.css"> 
</head> 

<body> 
    <div class="explanations" id="explanation_qas"> 
    <p> 
     Blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla  blabla blabla blabla 
     <ul > 
      <li class="explanation_list">blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla</li> 
      <li class="explanation_list">blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla</li> 
      <li class="explanation_list">blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla </li> 
     </ul> 
    </p> 
    </div> 

</body> 

</html> 

CSS가 다음과 같습니다

html, body, div { 
    margin: 0; 
    padding: 0; 
    font-size: 1.2vw; 
    font-family: "Arial Rounded", Arial, sans-serif; 
} 

body { 
    background-color: #A9E2F3; 
} 

ul { 
    list-style-type: circle; 
    list-style-position: inside; 
    list-style-color: white; 
} 

li { 
    display: inline-block; 
    width: 80%; 
    top: 1%; 
    right: 20%; 
    margin-top: 1.5%; 
    margin-bottom: 1.5%;  
    padding-top: 1%; 
    padding-bottom: 1%; 
    padding-left: 7%; 
    background-color: white; 
    text-align: left; 
    border-color: black; 
    border-style: solid solid solid solid; 
    border-radius: 0.5em 0.5em 0.5em 0.5em; 
    border-width: 0.15em; 
} 

.explanations { 
    display: inline-block; 
    background-color: black; 
    color: #A9E2F3; 
    width: 31%; 
    vertical-align: middle; 
    position: fixed; 
    right: 2.5%; 
    border-color: black; 
    border-style: solid solid solid solid; 
    border-radius: 0.5em 0.5em 0.5em 0.5em; 
    border-width: 0.15em; 
    text-align: center; 
    padding: 0.5%; 
    font-size: 1.2vw; 
} 

#explanation_qas { 
    top: 15%; 
} 

#explanation_sources { 
    top: 74%; 
    padding: 1%; 
    width: 30%; 
} 

.explanation_list { 
    background-color: black; 
} 

.explanation_list:hover { 
    color: #A9E2F3; 
} 

사전에 감사, 내가보기 엔 그것을 감사!

+0

어떤 브라우저를 사용하고 있습니까? 또한 JSFiddle 또는 CodePen에 예제를 게시 할 수 있습니까? 문제를 재현 할 수없는 것 같습니다. –

답변

1

display: list-item; css 속성은 <li> 태그의 기본값입니다. display: inline-block을 적용하면이를 무시하므로 글 머리 기호가 사라집니다.

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

빠른 도움에 감사드립니다! – sebjel1

1

리튬의 디스플레이 속성이

display: list-item; 

대신

display: inline-block; 

해야

(W3C CSS3 specification 참조) : 당신은 당신의 문제를 해결하기 위해 의사 클래스를 사용해야합니다 li 요소를 인라인 블록에 유지하려면 다음을 사용할 수 있습니다. before 및 내용

ul li { 
    display: inline-block; 
} 

ul li:before { 
    content: "• "; 
} 

<ul> 
    <li>list item1</li> 
    <li>list item3</li> 
    <li>list item3</li> 
</ul> 

this thread에 제안 된대로.

0

이 글 머리표가 사라져서 display : inline-block을 사용하면 안됩니다.

관련 문제