注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

让一切都逝去吧

排骨炖泥菜/猪肝炒苹果/鱼籽狗肉汤/狗头薏米汤

 
 
 

日志

 
 

上下两元素无法对齐  

2011-11-14 00:46:40|  分类: web |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
      表格内有两元素,内容都类似如下:
<a href="http://ljhzzyx.blog.163.com/blog/..." class="..."><span>文字</span></a>  //其中class为其加上了圆角按钮的样式
默认情况下,这两东西不会自动上下对齐,其形如:
 |___|
|___|
      总是错一位,有个方法,就是在<a>标签外套一个<p>标签,这样是对齐了,但单元格内总多出一行来。也就是单元格有两行元素,但总共占三行位置。估计<a>标签的样式引发了换行,最后通过设置浮动的方式取消它的换行:
<a href="http://ljhzzyx.blog.163.com/blog/..." class="..." style="float:center"><span>文字</span></a>
      这样它们在同一行了,中间加<br/>换行,但仍然不能对齐。试出来有两种方式可以使它们严格对齐:
<a href="http://ljhzzyx.blog.163.com/blog/..." class="..." style="float:center"><span>文字</span></a><br/>
&nbsp;<a href="http://ljhzzyx.blog.163.com/blog/..." class="..." style="float:center"><span>文字</span></a>
或者
<a href="http://ljhzzyx.blog.163.com/blog/..." class="..." style="float:center"><span>文字</span></a>&emsp;
<a href="http://ljhzzyx.blog.163.com/blog/..." class="..." style="float:center"><span>文字</span></a>&nbsp;
      &emsp;,这个是全角空格,同时还能引发换行。另外有个 &ensp;,半角空格,不能引发换行。
      在firefox下测试。


      发扬抄录的精神:
li中的span标签会自动换行,找了很久,但是原因没找到,我就郁闷了
css:
li {
 border-top:1px solid #000000;
 border-bottom:1px solid #000000;
}
span {
 float:right;
 color:#999999;
}
html:
<li><a href="http://ljhzzyx.blog.163.com/blog/#">做个实验</a> <span>09-03</span></li>
显示效果:
———————————–

做个实验
                                               09-03

————————————
问题出现了:a标签的文字在第一行,span里面的东西在第二行,换行了。
解决办法:
<li><span>09-03</span><a href="http://ljhzzyx.blog.163.com/blog/#">做个实验</a> </li>
显示效果:
—————————————-
做个实验              09-03

—————————————-
是不是好多了呢,另外一种解决办法是将a标签和span都浮动:
css:
li {
 border-top:1px solid #000000;
 border-bottom:1px solid #000000;
}
li a {
 float:left;
}
li span{
 float:right;
 color:#999999;
}
html:
<li><span>09-03</span><a href="http://ljhzzyx.blog.163.com/blog/#">做个实验</a> </li>
效果:
————————————
做个实验              09-03

http://zbana.com/blog/Templates/2011/0926/286.html

  评论这张
 
阅读(1496)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018