float和text-align的用法及區別

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

更多信息:

1.PyQt QtWebKit設置javascript開關

2.Firefox 15.0 beta 5版本發佈

發佈了15 篇原創文章 · 獲贊 1 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章