Question

我正在尝试为我的页面做一个简单的有序列表。无论出于何种原因，我只能在我的页面上的第一个项目符号中找到，但不知道为什么会这样。下面的HTML和CSS代码，感谢任何帮助！

HTML：

{%  extends "personal/header.html" %}
{% block content %}



<br>
<br>

<div class='font1' align='left' style='font-size: 16px'>
 <p>Quote</p> 
<hr>
</div>



<div>
<ol>
  <li>Line Item 1</li>
  <li>Line Item 2</li>
</ol>
<div>





<!--{% include "personal/includes/htmlsnippet.html" %}-->
{% endblock %}

CSS： @import url（＆＃39; https://fonts.googleapis.com/css?family=Rock+Salt＆＃39;）; @import url（＆＃39; https://fonts.googleapis.com/css?family=Open+Sans＆＃39;）;

p {
  font-family: 'Rock Salt', cursive;
}


.opensans {
  font-family: 'Open Sans', sans-serif;
}

ol{
    list-style-type: circle;
    /* Let the element behave like a <li> element */   
    display:list-item; 
    font-family: 'Open Sans', sans-serif;
    color: black;
    padding: 0px 0px;
    margin: 50px;


}



.name{
 color: #3d3d70;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 2.5px solid black;
    margin: 1em 0;
    padding: 0; 
    width: 90%;

}

table {

  border: 4px solid white;
}


/* Navigation Bar */

ul {
    font-family: 'Rock Salt', cursive;
    /* removes bullets */list-style-type: none;
    /* removes browser default settings */ margin: 0;
    background-color: 'white';
    text-align: center;




}


li {
    /* to get block elements to slide next to each other */

    display: inline-block;


}

li a {
    /* displays links as whole link area clickable blocks, can then specify padding (heigh, width, margins, etc) */
    display: inline-block;
    /* down, over*/
    padding: 20px 35px;
    background-color: 'white';
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-size: 1.25vw;
    font-weight: bold;
    color: black;
    display: inline-block;

}

li a:hover {
    /*color when hover over bar*/
    color: #8989dc;
    /* no underline when hovering over */
    text-decoration: none !important;
    font-family: 'Rock Salt', cursive;
    font-size: 16px;
    font-size: 1.35vw;
    display: inline-block;

}

.active {
    /* to let user know which tab currently on */
    background-color: #8989dc;
    font-family: 'Rock Salt', cursive;
}

Answer 1

为我工作 -

＆＃13;

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

           <style type="text/css">
            ol{
    list-style-type: circle;
    /* Let the element behave like a <li> element */   
    display:list-item; 
    font-family: 'Open Sans', sans-serif;
    color: black;
    padding: 0px 0px;
    margin: 50px;


}
           </style>
           </head>
           <body>
         <div>
<ol>
  <li>Line Item 1</li>
  <li>Line Item 2</li>
</ol>
<div>
            </body>

＆＃13;

Answer 2

<ol>是有序列表，即将自动增加的数字放在列表项前面的列表。在这里使用list-style-type: circle;并没有多大意义。您似乎想要一个无序列表 - <ul>？

有序列表仅生成列表中的第一个项目符号

2 个答案: