float和text-align的区别

zhrybd2 2011-12-12 02:26:28
在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,有什么区别呢
...全文
788 9 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
didiself 2012-08-24
  • 打赏
  • 举报
回复
顾名思义
float:left是整个容器浮动向左
text-align:left是容器内的文本左对齐
你可以随便建个空白页div里面填点字来试,自己动手才能知道差别
SallyAngela 2012-08-21
  • 打赏
  • 举报
回复
text-align:容器是内部文本或内容居中,分左中右
而float是整个容易浮动是靠左还是靠右
zaiwhere 2012-08-19
  • 打赏
  • 举报
回复
FLOAT的级别好像更高一些,在同时使用时
happytonice 2012-02-18
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 zsx841021 的回复:]
text-align是设置内部元素(firefox除外)或文本对齐方式; 而float是设置所加属性的标签本身漂浮位置,常用于外部div等布局定位,简单点说发就是text-align是个控制文本显示的东西,flaot是控制某个容器的东西。
[/Quote]
+1
夜风插画 2012-02-18
  • 打赏
  • 举报
回复
padding指内补白,主要是针对文字、字段起作用,而text-align是针对文字的对齐方式,同样是针对文字,所以使用起来容易造成冲突,即一方有效,另一方就不显效或无效!
而float是高一级层次的块漂浮,是另一层概念了!
x269147836 2012-02-18
  • 打赏
  • 举报
回复
因为a是内联元素,所以对a元素使用padding的时候只能影响到左右
上下padding是可以显示出来的,但是位置不会影响(加边框测试了下,貌似ie下是这样的)

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

如果只想设置text-align,可以添加一个line-height属性(设置行高的)
small_wolf_ 2012-02-18
  • 打赏
  • 举报
回复
#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控制内部文字
三石-gary 2011-12-12
  • 打赏
  • 举报
回复
text-align是设置内部元素(firefox除外)或文本对齐方式; 而float是设置所加属性的标签本身漂浮位置,常用于外部div等布局定位,简单点说发就是text-align是个控制文本显示的东西,flaot是控制某个容器的东西。

61,126

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧