<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><style type="text/css">*{margin:0;padding:0;}.footer{height:470px; background-color:#333;}.footer-top{width:990px; height:278px; border-bottom:1px dotted #555; margin:0 auto;}.footer-top h3{width:158px; line height:50px; color:#acaeab; font-size:14px; font-family:"微软雅黑";}.footer-top ul{color:#acaeab; height:10px; line height:10px; font-size:12px; font-family:"微软雅黑"; font-weight:bolder;}</style><body><div class="footer"> <div class="footer-top"> <h3>UC浏览器</h3> <ul> <li>产品动态</li> <li>功能介绍</li> <li>安卓浏览器</li> <li>iPhone浏览器</li> <li>电脑浏览器</li> <li>WP浏览器</li> <li>iPad浏览器</li> <li>aPad浏览器</li> <li>TV浏览器</li> <li>塞班浏览器</li> </ul> </div> <div class="footer-top"> <h3>UC浏览器</h3> <ul> <li>产品动态</li> <li>功能介绍</li> <li>安卓浏览器</li> <li>iPhone浏览器</li> <li>电脑浏览器</li> <li>WP浏览器</li> <li>iPad浏览器</li> <li>aPad浏览器</li> <li>TV浏览器</li> <li>塞班浏览器</li> </ul> </div> <div class="footer-top"> <h3>UC浏览器</h3> <ul> <li>产品动态</li> <li>功能介绍</li> <li>安卓浏览器</li> <li>iPhone浏览器</li> <li>电脑浏览器</li> <li>WP浏览器</li> <li>iPad浏览器</li> <li>aPad浏览器</li> <li>TV浏览器</li> <li>塞班浏览器</li> </ul> </div> <div class="footer-top"> <h3>UC浏览器</h3> <ul> <li>产品动态</li> <li>功能介绍</li> <li>安卓浏览器</li> <li>iPhone浏览器</li> <li>电脑浏览器</li> <li>WP浏览器</li> <li>iPad浏览器</li> <li>aPad浏览器</li> <li>TV浏览器</li> <li>塞班浏览器</li> </ul> </div> <div class="footer-top"> <h3>UC浏览器</h3> <ul> <li>产品动态</li> <li>功能介绍</li> <li>安卓浏览器</li> <li>iPhone浏览器</li> <li>电脑浏览器</li> <li>WP浏览器</li> <li>iPad浏览器</li> <li>aPad浏览器</li> <li>TV浏览器</li> <li>塞班浏览器</li> </ul> </div> <div class="footer-top"> <h3>UC浏览器</h3> <ul> <li>产品动态</li> <li>功能介绍</li> <li>安卓浏览器</li> <li>iPhone浏览器</li> <li>电脑浏览器</li> <li>WP浏览器</li> <li>iPad浏览器</li> <li>aPad浏览器</li> <li>TV浏览器</li> <li>塞班浏览器</li> </ul> </div></div> </body></html>也加过float，但加上去后浏览器上显示的更乱了
6 回答
已采纳
qq_青枣工作室_0
TA贡献446条经验 获得超754个赞
把你代码前面的两个样式
.footer{height:470px;
background-color:#333;
}
.footer-top{width:990px;
height:278px;
border-bottom:1px dotted #555;
margin:0 auto;
}改为：
.footer{height:470px;
background-color:#333;
width:990px;
margin:0 auto;
}
.footer-top{
height:278px;
border-bottom:1px dotted #555;
float:left;
}
钱不多多
TA贡献3条经验 获得超3个赞
要想并排显示首先总宽度要小于或等于对象上级宽度，这样才能并排显示实现横向排列排版布局。
你把.footer-top中的宽度改小，再在后面写上float: left;就行了；
还有你设置的行高line-height里面的“-”没有加上；
添加回答
举报
0/150
提交
取消