箇条書きの点は表示されません

私はliのものを持っていますが、ここでは箇条書きポイントを使用したいと思いますが、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; 
}

おかげで、私は非常に感謝します！

出典

2017-03-09 sebjel1

あなたはどのブラウザを使用していますか？JSFiddleまたはCodePenにも例を投稿できますか？私はあなたの問題を再現するように見えません。 –

display: list-item;<li>タグのデフォルトはcssプロパティです。 display: inline-blockを適用すると、オーバーライドされます。これにより、箇条書きが消えるようになります。

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

出典

2017-03-09 23:13:11

すぐにご利用いただきありがとうございます！ – sebjel1

李上の表示プロパティは

display: list-item;

代わりの

display: inline-block;

でなければなりません

（W3C CSS3 specificationを参照してください）：あなたはあなたの問題を解決するために、疑似クラスを使用する必要がありますli要素をインラインブロックにしたい場合は、beforeとcontentを使用できます。

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で提案されているように。

出典

2017-03-09 23:13:56 LucasP

この箇条書きが消えているので、display：inline-blockは使用しないでください。

出典

2017-03-09 23:17:18

箇条書きの点は表示されません

答えて

関連する問題