不顯示子彈點

我想這應該是一個簡單的問題，但我只是不完成它。不顯示子彈點

我有一個與李的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; 
}

在此先感謝，我非常欣賞它！

來源

2017-03-09 sebjel1

您使用的是什麼瀏覽器，您還可以在JSFiddle或CodePen上發佈示例嗎？我似乎無法重現您的問題。 –

display: list-item; css屬性默認爲<li>標記。通過應用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>

作爲pappy在this thread中提出的建議。

來源

2017-03-09 23:13:56 LucasP

不應該使用display：inline-block，因爲這些子彈正在消失。

來源

2017-03-09 23:17:18

不顯示子彈點

回答

相關問題