div中加入span右对齐后出现换行显示两种解决思路(同行显示,一个居中,一个靠右)
来源:互联网 发布:折800官网9.9包邮淘宝 编辑:程序博客网 时间:2024/06/05 11:09
就类似说空间里面模块中模块名靠左,编辑字样出现在靠右,一般思路的话一定是认为通过<td>分开两列,一个align=left,另一个align=right。后来我无意中发现有个东西叫<span>,比如实现模块的效果就可以:<div class="portlet" align="left">文章<span><a href="">编辑</a></span></div>;当然我们还需要一个CSS文件去控制span的样式:
这个时候就发现出现一个问题“文章”跟“编辑”不在同一行中!这下苦闷了!于是只好去搜了问题原因如下(以下内容摘自bolg):
当非float的元素和float的元素在一起的时候,如果非float元素在先,那么float的元素将被排斥
也就是说,你的span是float:right,但是你文本还是float:none
如果要让两者占据同一行,一般有两个解决方法:
第一种:把span先于文本显示
如:
第二:把文本也设成float 如:
为什么会这样呢?(以下内容摘自bolg)
Span本身虽然是内联元素,但加上浮动后它就变成了块级元素了,所以才会自动换行,浮动元素的顶端不能高于先于它出现的浮动元素或段落的顶端
PS:
不用float 让div 居右
一个大的 div 里面有且只有一个小的 div,为了让小的 div 居右,可以使用 float,但大家都知道 float 会带来兼容方面的一些麻烦,为了使结构不那么复杂,可以使用 text-align、margin 来实现居右。
为了兼容 IE,对大的 div 指定样式:
为了兼容 FF,对小的 div 指定样式:
.portlet span { float:right }
这个时候就发现出现一个问题“文章”跟“编辑”不在同一行中!这下苦闷了!于是只好去搜了问题原因如下(以下内容摘自bolg):
当非float的元素和float的元素在一起的时候,如果非float元素在先,那么float的元素将被排斥
也就是说,你的span是float:right,但是你文本还是float:none
如果要让两者占据同一行,一般有两个解决方法:
第一种:把span先于文本显示
如:
<div> <span class="right"> 其实百度是XX!! </span> 谷歌会稍微x一些,博客小子。 </div>
第二:把文本也设成float 如:
<div> <span class="right"> 其实百度是xx!! </span> <span class="left"> 谷歌会稍微x一些,博客小子。 </span> </div>
为什么会这样呢?(以下内容摘自bolg)
Span本身虽然是内联元素,但加上浮动后它就变成了块级元素了,所以才会自动换行,浮动元素的顶端不能高于先于它出现的浮动元素或段落的顶端
PS:
不用float 让div 居右
一个大的 div 里面有且只有一个小的 div,为了让小的 div 居右,可以使用 float,但大家都知道 float 会带来兼容方面的一些麻烦,为了使结构不那么复杂,可以使用 text-align、margin 来实现居右。
为了兼容 IE,对大的 div 指定样式:
text-align:right;
为了兼容 FF,对小的 div 指定样式:
margin:0px auto 0px auto;
同样,如果要居中:text-algin 可指定为 center,margin 的左、右边距可指定为 auto。
转载:http://www.lis123.com/css/20130306/33263.html
0 0
- div中加入span右对齐后出现换行显示两种解决思路(同行显示,一个居中,一个靠右)
- ie6 span 换行解决span float:right不能右对齐而是换行显示
- ie6 span 换行解决span float:right不能右对齐而是换行显示
- div,li,span中加入span右对齐方法
- span右对齐不换行
- 解决CSS中float:right后右对齐换行问题
- linearlayout靠右显示
- css布局小技巧之:让一个小图片水平靠右对齐,垂直居中
- div下同行多元素右对齐
- Extjs学习 bbar、tbar靠右,居中显示
- html使用display:inline-block实现标签右对齐,值左对齐效果。和设置div宽度,并居中显示。嵌套div的里层div文字居中显示
- EditText光标靠右显示
- [HTML][CSS]解决CSS中float:right后右对齐换行问题
- CSS中float:right后右对齐换行问题
- 线性布局中两个控件,一个居右显示
- 设置edit右对齐显示
- Winform状态栏控件中Label靠右显示的方法
- linearlayout水平靠右显示方法
- C++之练习题6
- i2c驱动架构 davinc dm368 i2c驱动分析
- [LeetCode] Search Insert Position
- struts2 json传递对象
- 华为B199刷机包 官方MEUI 2.0 B190精简省电版
- div中加入span右对齐后出现换行显示两种解决思路(同行显示,一个居中,一个靠右)
- JAVA基础知识汇总
- fd_set的一些认识
- GIS开源软件集合
- UIView设置背景图片的方法
- VLC学习 第一篇安装环境
- linux指令整理(转载)
- 银河舰17-4通杀德甲3豪门
- 利用Ptrace在Android平台实现应用程序控制