float和text-align的区别

[zhrybd2]

在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>
....
</ul>
可是如果将#mainnav a中的float:left改成text-align:left，“首页”等字体周围的空间就没了，也就是#mainnav a中的语句padding:5px 15px 5px 15px;
没有起作用；
而改成float:left后，字体周围的空间又有了，请问这是为什么；
对于float:left和text-align-left，有什么区别呢

[三石-gary]

text-align是设置内部元素（firefox除外）或文本对齐方式； 而float是设置所加属性的标签本身漂浮位置，常用于外部div等布局定位,简单点说发就是text-align是个控制文本显示的东西，flaot是控制某个容器的东西。

[small_wolf_]

#mainnav{ background-image:url(../img/nav_bg.gif) repeat-x left bottom;
overflow:hidden; border-bottom:1px solid #666666;}

#mainnav li{ float:left; background-image:url(../img/nav_sep.jpg) no-repeat right bottom;}

#mainnav a { float:left; text-align:left; font-size:12px; color:#000000; padding:5px 15px 5px 15px; text-decoration:none;}

float控制容器，，，text-align控制内部文字

[x269147836]

因为a是内联元素，所以对a元素使用padding的时候只能影响到左右
上下padding是可以显示出来的，但是位置不会影响（加边框测试了下，貌似ie下是这样的）

而使用了float之后，a会变成块级元素，所以设置padding有效

如果只想设置text-align，可以添加一个line-height属性（设置行高的)

[夜风插画]

padding指内补白，主要是针对文字、字段起作用，而text-align是针对文字的对齐方式，同样是针对文字，所以使用起来容易造成冲突，即一方有效，另一方就不显效或无效！
而float是高一级层次的块漂浮，是另一层概念了!

[happytonice]

[Quote=引用 1 楼 zsx841021 的回复:]
text-align是设置内部元素（firefox除外）或文本对齐方式； 而float是设置所加属性的标签本身漂浮位置，常用于外部div等布局定位,简单点说发就是text-align是个控制文本显示的东西，flaot是控制某个容器的东西。
[/Quote]
+1

[zaiwhere]

FLOAT的级别好像更高一些，在同时使用时

[SallyAngela]

text-align:容器是内部文本或内容居中，分左中右
而float是整个容易浮动是靠左还是靠右

[didiself]

顾名思义
float:left是整个容器浮动向左
text-align：left是容器内的文本左对齐
你可以随便建个空白页div里面填点字来试，自己动手才能知道差别