Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why does list-style-type not work ? Nothing was shown instead

Tags:

html

css

CSS and HTML Code is as shown below. I used eric meyer's reset script.. I edited out the one which I think is relevant.

    /* 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;
        }

This is the HTML code.

        <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>
like image 981
TheKraven Avatar asked Jan 01 '26 01:01

TheKraven


1 Answers

The list-style-type property applies to elements with display: list-item only. So if you want to put some markers before list items that you have turned to inline elements, you have to add markers into the content directly, or via generated content. E.g., the following puts a bullet “•” and a space before each item:

#navbar ul li:before {
   content: "\2022  "
}
like image 61
Jukka K. Korpela Avatar answered Jan 02 '26 15:01

Jukka K. Korpela



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!