0

嗨，我似乎有一些关于 ol 和 ul 标签没有显示左侧 syde 上的数字和圆圈的问题。我没有使用重置 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 显示数字和圆圈？

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

关联

4

3 回答 3

2

删除显示：块；在#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
}
于 2012-10-05T07:59:45.270 回答
2

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

嗨，现在删除到#menu li display:block;

像这样

#menu li{
display:block; // remove this line
}
于 2012-10-05T08:10:27.363 回答
2

正如其他答案所提到的，问题是由设置为的 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 */
}
于 2012-10-05T08:48:59.197 回答