这是我想要达到的目标的图片：
但是,我最终得到的结果如下：
这是为简化问题而编写的代码,以及指向JSFiddle的链接
<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来修复整行列表的高度,以便任何包装列表从新行的左侧开始？
解决方法 检查这个 jsFiddle在firefox中完美运行.
变
#footer-menu li { margin:0 20px 5px 0; padding-left:6px; List-style-type:none; /*float:left; display:inline; */ /*Added this */ display:inline-table; background:none; position:relative; Font-family:Arial; Font-weight:bold; border-left:1px solID #FFFFFF;} 总结 以上是内存溢出为你收集整理的格式化列表的水平列表,如何修复动态html的高度全部内容，希望文章能够帮你解决格式化列表的水平列表,如何修复动态html的高度所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）