Menu
So, I have attempted to create a horizontal list for use on a new website I am designing. I have attempted a number of the suggestions found online already such as setting 'float' to left and such - yet none of these have worked when it comes to fixing the problem.
ul#menuItems { background: none; height: 50px; width: 100px; margin: 0; padding: 0; } ul#menuItems li { display: inline; list-style: none; margin-left: auto; margin-right: auto; top: 0px; height: 50px; } ul#menuItems li a { font-family: Arial, Helvetica, sans-serif; text-decoration: none; font-weight: bolder; color: #000; height: 50px; width: auto; display: block; text-align: center; line-height: 50px; }<ul id="menuItems"> <li> <a href="index.php">Home</a> </li> <li> <a href="index.php">DJ Profiles</a> </li> </ul>Currently I am unsure of what is causing this issue, how would I go about and resolve it?
815
Horizontal lists, lists that appear within written text, present a series of items without promoting the items as priority on the page (as a vertical list does). There are three punctuation marks that are particularly useful when presenting lists: the colon, the semicolon and the comma.
A horizontal list is commonly used for creating a website's navigation menu component. If you want to create a reusable navigation component, then you need to separate the CSS from the HTML document. The following CSS code style will transform your <ul> element into a navigation bar component: ul.
I've noticed a lot of people are using this answer so I decided to update it a little bit. No longer including support for now-unsupported browsers.
ul > li { display: inline-block; /* You can also add some margins here to make it look prettier */ }<ul> <li> <a href="#">some item</a> </li> <li> <a href="#">another item</a> </li> </ul>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
