以下代码我到底是哪里错了，怎么无法横向排列？
<!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
把你代码前面的两个样式.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; } -
钱不多多
要想并排显示首先总宽度要小于或等于对象上级宽度，这样才能并排显示实现横向排列排版布局。你把.footer-top中的宽度改小，再在后面写上float: left;就行了；还有你设置的行高line-height里面的“-”没有加上； -
Menoen
你是想让li横行排列还是footer-top横向排列呢？这两个都可以用float方法，但记得清浮动。
随时随地看视频慕课网APP
Html/CSS
前端工具