CODEWITHSUNDEEP
htmlcss
sebjel1
sebjel1

Reputation: 55

Bullet points are not displayed

I guess this should be a simple question, but I just don't get it done.

I have a ul with li's and I want to use bullet points here, but they just won't be displayed, even though I included them in my CSS.

HTML looks like that:

<?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 looks like that:

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;
}

Thanks in advance, I highly appreciate it!

Upvotes: 1

Views: 7653

Answers (3)

Ramesh Kumar
Ramesh Kumar

Reputation: 1568

You should not use display:inline-block, because of this bullets are disappearing.

Upvotes: 0

LucasP
LucasP

Reputation: 81

the display property on the li should be 

display: list-item;

instead of

 display: inline-block;

(see W3C CSS3 specification)

If you want your li element to stay inline-block , you could use :before and content

ul li {
  display: inline-block;
}

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

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

as pappy suggested in this thread.

Upvotes: 1

Tomasz Bubała
Tomasz Bubała

Reputation: 2153

display: list-item; css property is default for <li> tag. By applying display: inline-block you're overriding it, which causes bullet points to disappear. You should use a pseudo class to solve your problem:

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

Upvotes: 4

Related Questions