text-align 屬性規定元素中的文本的水平對齊方式。
該屬性通過指定行框與哪個點對齊,從而設置塊級元素內文本的水平對齊方式。通過允許用戶代理調整行內容中字母和字之間的間隔,可以支持值 justify。
下面是一段CSS代碼:
#mainnav
{
background-image:url(../img/nav_bg.gif);
background-position:left bottom;
background-repeat:repeat-x;
overflow:hidden;
border-bottom:1px solid #666666;
}
#mainnav li
{
float:left; background-image:url(../img/nav_sep.jpg);
background-position:right bottom;
background-repeat:no-repeat;
}
#mainnav a
{
float:left; //text-align:left
font-size:12px;
color:#000000;
padding:5px 15px 5px 15px;
text-decoration:none;
}
在HTML中的代碼是:
<ul id=”mainnav”>
<li>< a href=”#”>主題</a></li>
<li> <a href=”#”>教育</a></li>
<li><a href=”#”>科技</a></li>
</ul>
問題:如果將#mainnav a中的float:left改成text-align:left,“首頁”等字體周圍的空間就沒了,也就是#mainnav a中的語句padding:5px 15px 5px 15px;沒有起作用;但改成float:left後,字體周圍的空間又有了,產生這個的根本原因是什麼呢?
...........................
..........................................解決方法及閱讀全文,請點擊:float和text-align的用法及區別
此文轉載自:K.N.J's blog
更多信息: