<!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>無(wú)標(biāo)題文檔</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>產(chǎn)品動(dòng)態(tài)</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>產(chǎn)品動(dòng)態(tài)</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>產(chǎn)品動(dòng)態(tài)</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>產(chǎn)品動(dòng)態(tài)</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>產(chǎn)品動(dòng)態(tài)</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>產(chǎn)品動(dòng)態(tài)</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>也加過(guò)float，但加上去后瀏覽器上顯示的更亂了
6 回答
已采納
qq_青棗工作室_0
TA貢獻(xiàn)446條經(jīng)驗(yàn) 獲得超754個(gè)贊
把你代碼前面的兩個(gè)樣式
.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;
}
錢(qián)不多多
TA貢獻(xiàn)3條經(jīng)驗(yàn) 獲得超3個(gè)贊
要想并排顯示首先總寬度要小于或等于對(duì)象上級(jí)寬度，這樣才能并排顯示實(shí)現(xiàn)橫向排列排版布局。
你把.footer-top中的寬度改小，再在后面寫(xiě)上float: left;就行了；
還有你設(shè)置的行高line-height里面的“-”沒(méi)有加上；
Menoen
TA貢獻(xiàn)7條經(jīng)驗(yàn) 獲得超2個(gè)贊
你是想讓li橫行排列還是footer-top橫向排列呢？
這兩個(gè)都可以用float方法，但記得清浮動(dòng)。
添加回答
舉報(bào)
0/150
提交
取消