我們在做網頁導航的時候，最常用的就是讓Li左浮，但是浮動物件要給固定寬度，不然在ie下會出現撐開的情況，導航的話沒有問題，一般都是兩個字或者四個字，固定寬度也比較美觀，今天就碰到一個問題是翻頁代碼用浮動li實現，因為頁碼有一位元，兩位元，還有三位元四位元，那麼固定寬度顯然不能滿足要求，於是乎，改用li的display:inline；問題解決了，實現同樣的效果，寬度自適應^_^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>橫排Li的自適應寬度</title><br /><mce:style type="text/css"><!--<br />* {<br />margin:0;<br />padding:0;<br />}<br />ul,li {<br />list-style:none;<br />}<br />.content{<br />margin-left:30px;<br />border:1px #0066CC solid;<br />padding:2px;<br />font-size:12px;<br />}<br />.content ul {<br />height:30px;<br />}<br />.content li {<br />display:inline;<br />margin:2px 10px;<br />background-color:#999999;<br />}<br />.content li a {<br />padding:5px;<br />}<br />--></mce:style><style type="text/css" mce_bogus="1">* {<br />margin:0;<br />padding:0;<br />}<br />ul,li {<br />list-style:none;<br />}<br />.content{<br />margin-left:30px;<br />border:1px #0066CC solid;<br />padding:2px;<br />font-size:12px;<br />}<br />.content ul {<br />height:30px;<br />}<br />.content li {<br />display:inline;<br />margin:2px 10px;<br />background-color:#999999;<br />}<br />.content li a {<br />padding:5px;<br />}</style><br /></head></p><p><body><br /><div class="content"><br /><ul><br /><li><a href="#" mce_href="#">這個是漢字</a></li><br /><li><a href="#" mce_href="#">This is some english words!</a></li><br /><li><a href="#" mce_href="#">這個是漢字+This is some english words!</a></li><br /></ul><br /></div><br /></body><br /></html><br />
今天又碰到float的固定寬度，內容無法顯示完全，再來紀念一下，發誓以後堅決不用float。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
