Question

嗨我似乎在ol和ul标签上没有显示左侧syde上的数字和圆圈的问题。我没有使用reset css.Here是我的代码：

             <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显示数字和圆圈？

编辑：将鼠标悬停在列表上查看我的意思：

link

Answer 1

删除display：block;在#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 2

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

您好删除到#menu li display:block;

就像这样

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

Answer 3

正如其他提到的答案一样，问题是由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 */
}

Ul，Ol没有显示数字和圆圈

3 个答案: