Question

我想这应该是一个简单的问题，但我还没有完成它。

我有一个带有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;
}

提前致谢，我非常感谢！

Answer 1

display: list-item; css属性是<li>标记的默认属性。通过应用display: inline-block，您可以覆盖它，这会导致子弹点消失。您应该使用伪类来解决您的问题：

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

Answer 2

li上的display属性应该是

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中建议使用pappy。

Answer 3

你不应该使用display：inline-block，因为这个子弹正在消失。

不显示项目符号

3 个答案: