为什么list-style-type不起作用?没有显示任何东西

时间:2012-07-18 14:01:26

标签: html css

CSS和HTML代码如下所示。我使用了eric meyer的重置脚本..我编辑了我认为相关的那个。

    /* reset CSS script */

ol, ul {
    list-style: none;
}

/* End of reset CSS script */

#navbar {
    border: 5px solid red;
    margin: -580px 0 0 160px;
    width: 1500px; 

    font-size: 26px;
    font-family: 'Conv_LITHOSPRO-REGULAR';
}
#navbar ul li {     
        display:inline;
        padding:0 35px 0 0; 
        list-style-type:disc;
        }

这是HTML代码。

        <nav id="navbar">
            <ul id="hli">
                <li id="OP"><a  href="Orders.html">Your Order</a></li>
                <li id="MP"><a  href="Menu.html">Menu</a></li>
                <li id="CUP"><a  href="ContactUs.html">Contact Us</a></li>
                <li id="JP"><a  href="Jobs.html" target="_blank">Jobs</a></li>
                <li id="TCP"><a  href="TC.html">Terms & Conditions</a></li>
            </ul>   
        </nav>

2 个答案:

答案 0 :(得分:7)

list-style-type property仅适用于display: list-item的元素。因此,如果要在已转换为内联元素的列表项之前放置一些标记,则必须直接在内容中添加标记,或者通过生成的内容添加标记。例如,下面在每个项目之前放置一个子弹“•”和一个空格:

#navbar ul li:before {
   content: "\2022  "
}

答案 1 :(得分:0)

就我而言,overflow-x:hidden 导致了问题。