我想这应该是一个简单的问题，但我就是做不出来。
我有一个带有 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;
}
提前致谢，非常感谢!
最佳答案
display: list-item; <li> 的默认 css 属性标签。通过申请display: inline-block您正在覆盖它，这会导致要点消失。您应该使用伪类来解决您的问题:
ul.explanations>li:before{
content: "";
display: list-item;
position: absolute;
}
关于html - 不显示要点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42707190/