因此,我尝试创建一个水平列表以在我正在设计的新网站上使用。我已经尝试了许多在网上找到的建议,例如将“ float”设置为左等,但在解决问题时,这些建议均无效。
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>
目前,我不确定导致此问题的原因是什么,该如何解决?
我注意到很多人都在使用此答案,因此我决定对其进行一些更新。如果您想查看原始答案,请检查以下内容。新答案演示了如何将某些样式添加到列表中。
ul > li { display: inline-block; /* You can also add some margins here to make it look prettier */ zoom:1; *display:inline; /* this fix is needed for IE7- */ } <ul> <li> <a href="#">some item</a> </li> <li> <a href="#">another item</a> </li> </ul>