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版本发布