Ul、Ol 不显示数字和圆圈

Question

嗨，我似乎遇到了一些关于 ol 和 ul 标签的问题，没有在左侧显示数字和圆圈。我没有使用重置 css。这是我的代码：

             <ol>
                <li>ALL FILES</li>
                <li>PHP SCRIPTS</li>
                <li>WORDPRESS</li>
                <li>JAVASCRIPT</li>
                <li>CSS MOBILE</li>
            </ol>
            <ul>
                <li>ALL FILES</li>
                <li>PHP SCRIPTS</li>
                <li>WORDPRESS</li>
                <li>JAVASCRIPT</li>
                <li>CSS MOBILE</li>
           </ul>
           <ul>
                <li>ALL FILES</li>
                <li>PHP SCRIPTS</li>
                <li>WORDPRESS</li>
                <li>JAVASCRIPT</li>
                <li>CSS MOBILE</li>
          </ul>
          <ul>
               <li>ALL FILES</li>
               <li>PHP SCRIPTS</li>
               <li>WORDPRESS</li>
               <li>JAVASCRIPT</li>
               <li>CSS MOBILE</li>
          </ul>


#menu .dropdown_3columns li {
    float: none;
    position: static;
    text-align: left;
}
#menu li {
    border: medium none;
    display: block;
    float: left;
    height: 28px;
    margin-left: 0;
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 8px;
    position: relative;
    text-align: center;
}

如何让 ol 和 ul 显示数字和圆圈？

编辑： 将鼠标悬停在列表上即可了解我的意思：

链接

Answer 1

正如其他答案提到的，问题是由 li 元素设置为

display: block

引起的 - 这使得它们占据为它们设置的整个宽度，并迫使数字或项目符号离开可见区域。

要解决此问题，请将 CSS 更改为

#menu li {
    display: block;
    padding-left: 18px;
}

对此：

#menu li {
    display: inline-block; /* prevents the bullets being forced off the left-hand side, but still allows padding to be applied */
    padding-left: 8px;
    margin-left: 10px; /* This gives enough room for the bullets to be shown */
}

您还在此部分中将所有

li

元素设置为十进制：

#menu .dropdown_3columns ol,
#menu .dropdown_3columns ul {
    float: left;
    margin-top: 40px;
    margin-bottom: 25px;
    list-style-type: decimal;
}

因此，如果您想要要点而不是数字，请在本节后添加以下内容：

#menu .dropdown_3columns ul {
    list-style-type: disc; /* or circle etc */
}

Answer 2

................................................ ....

嗨，现在删除到

#menu li display:block;

就像这样

#menu li{
display:block; // remove this line
}

Answer 3

删除显示：块；在 #menu li 中并删除 list-style-type:decimal;

#menu li {
display: block; //remove this line
}

并删除

#menu .dropdown_3columns ol, #menu .dropdown_3columns ul{
list-style-type: decimal; //remove this line
}

Answer 4

我正在与一名设计师合作完成这个项目，由于某种原因，我在我的主（我正在使用 Angular）css 文件（styles.css）中添加了这一行：

@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css")

里面有

ol,ul {
  list-style:none
}

这基本上阻止了我添加的任何样式。所以我只是删除了这一行，有序列表的数字开始出现。