在网页中有很多左右结构的标题,在一行的左边是“标题”,右边则是“更多”,在IE6,7中,如果处理不当则会出现右边的文字“更多”出现在下一行。究其原因是float:right的问题。下面是几种解决方法,可根据情况来选择,当然也可以有其他更好的办法。
1:使一行中的元素全部浮动起来,如在这里,我们可以让第一个span元素增加float:left属性。
2:用绝对定位代替浮动,如在这里,让div元素获得position:relative属性。第二个span元素获得position:absolute属性,该元素的具体位置可以设置它的top、left等属性。
示例代码如下:
<style>
*{
margin:0;
padding:0;
}
div{
width:400px;
height:40px;
line-height:40px;
}
.right{
float:right;
}
</style>
<div>
<span>标题</span>
<span class="right">更多</span>
</div>
相关推荐
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> ...
#tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; ...
.header-right{ float:right; padding:16px 5% 10px 0; position:relative;} .nav-btn{ display:block; background:#1271A0; width:40px; height:40px; line-height:40px; position:absolute; right:10px; bottom:6...
.ui-multiselect-filter { float:left; margin-right:10px; font-size:11px } .ui-multiselect-filter input { width:100px; font-size:10px; margin-left:5px; height:15px; padding:2px; border:1px solid #292929...
margin-right:auto; margin-bottom:0px; margin-left:auto; } #top{ padding-top:15px; height:90px; } #logo{ margin:0px; padding:0px; float:left; width:365px; text-align:right; } .pic{ ...
是不是很多朋友在应用FLOAT左右的时候也出现这个问题,下面给出几种常用的解决方法,希望对出现这样问题的朋友有所帮助哈。 第一种解决办法:把左右对换,比如吧日期放在标题的前面,我朋友就是那个问题,对调以下...
如果前面几个元素没有设置浮动,而给最后的元素设置为float:right,则被设置为浮动的这个元素会出现在下一行,针对这个问题,下文给出详细的解决方法,感兴趣的朋友不要错过
caption visibility with stylerUpdate : TAdvSpinEdit v1.4.0.1 ----------- Improved: float formatting OnExit for keyboard entry**********TMS Component pack v3.7 : update Dec 12, 2005**********Update : ...
一、代码 <style>...float:left;} div ul li:nth-child(1){background:#f00;} div ul li:nth-child(3){background:#ccc;} </style> <li>11 <li>22 <li>33 二、预览效果 如上图
float:right; text-decoration:none; font-size:11px; padding:0px 15px 0 0 ; } .about{ width:337px; clear:both; background:url(images/border.gif) no-repeat bottom center; padding:0 0 20px 0; } img.right{...
A4 - many : as : github_tools event : githubTool selector : main .col-lg-9.mt-1.mb-4.float-lg-right a.col-md-6.mb-4.d-flex.no-underline element : - property : selector : a type : string
.user-address li.user-addresslist {float: none;min-height:80px ;position: relative;border-bottom:1px solid #eee ;padding:15px 10px;} .new-tit {padding-bottom:7px ;font-size: 14px; position:relative;} ...
次的情况与上次不同,上次直接将浮动的元素移到不浮动的元素之前就可以解决问题,而这次的float:right 时元素换行错位的情况,在下文也给出了不错的解决方法
原文:http://www.macji.com/blog/article/to-achieve-cross-browser-css-float-center/to-achieve-cross-browser-css-float-center/ 我们都知道float:left和float:right,但是否想过float:center呢?居中浮动。。。...
|FLOAT|4|单精度浮点数|| |DOUBLE|8|双精度浮点数|| |ENUM||单选,比如性别|ENUM('男','女')| |SET||多选|SET('A','B','C')| |DATE|3|日期|YYYY-MM-DD| |TIME|3|时间点或持续时间|HH:MM:SS| |YEAR|1|年份值|...
.float-rt{float:right;}/* float right */ .float-lt{float:left;}/* float left */ .clear{clear:both;}/* clear float */ .pos-relative{position:relative;}/* Position Relative */ .pos-absolute{position:...
我们都知道float:left和float:right,但是否想过float:center呢?居中浮动。。。
margin:7px 6px 9px 0;vertical-align:middle}.bdsug .bdsug-direct p span{margin-left:8px}.bdsug .bdsug-direct p i{font-size:12px;line-height:100%;font-style:normal;font-weight:normal;color:#fff;...