我正在创建一个站点地图类型的菜单,位于页面底部,可以快速访问站点结构的前两个级别.但是我无法格式化列表,因此它们在包装时会整齐地显示出来.
这是我想要达到的目标的图片:
但是,我最终得到的结果如下:
<html lang="en"> <head> <style type="text/css"> #footer-menu { float:left; background:#454545; color:#FFFFFF; width:850px; margin:50px auto 0 auto; padding:10px 10px 2px 10px; display:inline; } #footer-menu ul { padding:0; list-style-type:none; left:auto; overflow: auto; } #footer-menu li { margin:0 20px 5px 0; padding-left:6px; list-style-type:none; float:left; display:inline; background:none; position:relative; font-family:Arial; font-weight:bold; border-left:1px solid #FFFFFF; } #footer-menu ul li ul { margin:5px 0 5px 0; } #footer-menu ul ul li { float:none; padding:0; margin:0 0 2px 0; font-weight:normal; display:block; width:auto; border:0; } #footer-menu a { text-decoration: none; color: white; } #footer-menu a:hover { text-decoration: underline; color: white; } </style> </head> <body> <div id="footer-menu"> <ul> <li><a href="#">List 1 Title is quite looooong</a> <ul> <li><a href="#">List 1 Item 1</a></li> <li><a href="#">List 1 Item 2</a></li> <li><a href="#">List 1 Item 3</a></li> <li><a href="#">List 1 Item 4</a></li> <li><a href="#">List 1 Item 5</a></li> <li><a href="#">List 1 Item 6</a></li> <li><a href="#">List 1 Item 7</a></li> <li><a href="#">List 1 Item 8</a></li> </ul> </li> <li><a href="#">List 2 Short title</a> <ul> <li><a href="#">List 2 Item 1</a></li> <li><a href="#">List 2 Item 2</a></li> <li><a href="#">List 2 Item 3</a></li> <li><a href="#">List 2 Item 4</a></li> </ul> </li> <li><a href="#">List 3 Title of average length</a> <ul> <li><a href="#">List 3 Item 1</a></li> <li><a href="#">List 3 Item 2</a></li> <li><a href="#">List 3 Item 3</a></li> </ul> </li> <li><a href="#">List 4 with no sub items</a></li> <li><a href="#">List 5 Should wrap under list 1</a> <ul> <li><a href="#">List 2 Item 1</a></li> <li><a href="#">List 2 Item 2</a></li> <li><a href="#">List 2 Item 3</a></li> <li><a href="#">List 2 Item 4</a></li> </ul> </li> </ul> </div> </body> </html>
列表中的项目来自站点地图XML文件,通过脚本生成HTML,列表将随着页面添加到站点而改变,所以我正在寻找一种不需要我手动调整高度的解决方案列表,以便正确格式化.
是否有可能使用CSS来修复整行列表的高度,以便任何包装列表从新行的左侧开始?
解决方法
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。