今天遇到一个html的问题
.tag.tag_success.tag_x
%span tag.display_name
%a(href="javascript:void(0)" style= "float:right;")
给a元素添加float: right 它会脱离队伍,跳到下一行。
原因:
当非float的元素和float的元素在一起的时候,如果非float元素在先,那么float的元素将被排斥,现在a元素是float:right,但是文本还是float:none,所以问题就出现了。
如果要让两者显示在同一行,解决方案有两种:
1. 把float的元素写到非float元素前显示,即:
.tag.tag_success.tag_x
%a(href="javascript:void(0)" style= "float:right")
%span tag.display_name
2. 把文本也设成float,即:
.tag.tag_success.tag_x
%span(style="float:left;") tag.display_name
%a(href="javascript:void(0)" style= "float:right;")
这两种方法均可实现需求,根据情况选择。
分享到:
相关推荐
CSS中通常我们需要将某元素居左、居右显示,这个时候我们就可以根据float来设置,在设置右对齐显示的时候,我们通常会遇到,右对齐的元素会换行,这样就会出现左右元素不在同一条线上,我们可以通过以下方式来解决这...
一做站的朋友问我为什么同时使用FLOAT:LEFT 和RIGHT的时候不在同一水平线上,二是在另一行,举个例子,大家一看就明白了
次的情况与上次不同,上次直接将浮动的元素移到不浮动的元素之前就可以解决问题,而这次的float:right 时元素换行错位的情况,在下文也给出了不错的解决方法
如果前面几个元素没有设置浮动,而给最后的元素设置为float:right,则被设置为浮动的这个元素会出现在下一行,针对这个问题,下文给出详细的解决方法,感兴趣的朋友不要错过
有不少网友反应自己用了float:right后内容跑到下面去了,关于这个问题我们先来看一个例子: 复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN ” ...
当N个元素浮动后,会导致错位的问题。一般给元素一个固定的height就没有这个现象。 但是当高度不一致时,就需要想别的办法来解决了: 1、给父元素定义font-size:0; 浮动子元素定义需要的font-size, 再定义display...
就类似说空间里面模块中模块名靠左,编辑字样出现在靠右...复制代码代码如下: .portlet span { float:right } 这个时候就发现出现一个问题“文章”跟“编辑”不在同一行中!这下苦闷了!于是只好去搜了问题原因如下
主要介绍了css float left布局换行不正常问题的解决的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
div#row1 { float: left; color: blue; } div#row2 { color: red } </style> </head> <body> ”row1″>第一个div</div> ”row2″>第二个div不换行</div> </body> </html>
我们都知道float:left和float:right,但是否想过float:center呢?居中浮动。。。
float:right;font-size:12px;cursor:pointer} </style> <body><div id="rbbox">()">关闭</a><iframe src="1.jpg" height="200" width="300" scrolling="no" ></iframe></div> </body> </html> ...
float: right; height: 30px; text-indent: -9999px; width: 50px; } <h3> 1F 热门车系 [更多+]</a> </h3> 当程序如上时,a标签会在IE等浏览器下换行。 解决方法,就是把<a> 标签放在文本前面,如下: <h3>
本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有span,a,em,strong等。而float表示的是浮动,float:...
问题:若两个内层盒子宽度设定为50%,则加上间隔15px会超出父容器就会自动换行;若两个内层盒子宽度设定为小于50%,则浏览器尺寸改变时就不会充满父容器,导致水平不居中。 解决方法:使用calc()动态计算宽度。...
/ float: right;进行左/右浮动。多出使用了定位元素position: relative;——position: absolute;使用了多个:hover效果来实现变化。能够巩固熟悉浮动、相对定位,绝对定位、下拉列表、hover效果、整体缩放等知识点的...