css给span加float:right右浮动后内容换行下移

转自:https://www.jb51.net/css/67309.html

在div css布局中 当span标签右浮动时会产生换行狭义的现象

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns= "http://www.w3.org/1999/xhtml "> <head> <meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 " /> <title> 无标题文档 </title> <style type= "text/css "> span{ float: right; } </style> </head> <body> <div> <ul> <li>
 <a href= ‘ShowArticle.asp?ArticleID=123 ‘ title= ‘文章标题 ‘ target=
‘_blank ‘> 文章标题 </a> <span> (2008-10-17 9:30:00)
</span> </li> </ul> </div> </body> </html> 

上面的例子看似没问题，但实际效果是日期往下跑了，出现这个问题的原因是这样的： 当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥 也就是说，你的span是float:right，但是你的a还是float:none 如果要让两者占据同一行，要么你把span先于a显示，要么把a也设成float（float:left） 好了，说到这大家应该恍然大悟了吧

原文地址：https://www.cnblogs.com/isme-zjh/p/12067932.html

时间： 2024-11-10 16:22:28

css给span加float:right右浮动后内容换行下移的相关文章

为什么IE6下右浮动的对象换行了

为什么IE6下右浮动的对象换行了:当一个对象右浮动的时候,在IE6浏览器下面,它有可能会换行.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂蚁部落</title&

li元素右浮动会出现换行

li元素右浮动会出现换行:一般情况下想让块级元素在一行显示,可以为元素施加浮动,但是有时候表现却并非如人愿,会出现换行的情况.看如下代码: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂

为什么div右浮动后还会换行:建议:尽可能的手写代码,可以有效的提高学习效率和深度.让两个div排列在同一行有多种方法,有些初学者可能会这样写,那就是左边的div不浮动,右边的div右浮动,以为这样就可以达到两个div在同一行的效果的,但是事实并非如此.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" c

ie下li标签中span加float:right不换行问题解决方案

在IE6,IE7下使用标签时,在加入右浮动样式(float:right)后,会换行的bug解决方案:bug案例:新闻列表中,为使时间右对齐,加右浮动产生换行 <ul> <li><a href=“#”>BEST SUSHI MENU</a> <span>2012-12-24</span></li> <li><a href=“#”>BEST SUSHI MENU</a> <span&g

为什么右浮动以后顺序颠倒了

为什么右浮动以后顺序颠倒了: 有时候会发现一个奇怪的现象,那就是为对象添加右浮动以后,显示顺序和原来的顺序颠倒了,下面就结合实例分布分析一下出现这种现象的原因. 实例一: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" />

右浮动div换行现象的原因

右浮动div换行现象的原因:当然右浮动出现div换行的原因是多种多样的,下面就介绍一个初学者比较容易出现的一个错误.代码实例: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</

左浮动和右浮动

在div+css中浮动分为左浮动,右浮动,清除浮动 ① 右浮动所谓右浮动 ,指一个块元素向右移动,让出自己空间, 向右移动直到碰到包含自己的父元素的最右边的边框. ② 左浮动所谓左浮动 ,指一个块元素向左移动,让出自己空间, 向右移动直到碰到包含自己的父元素的最左边的边框. 快速入门 : 理论完了以后直接开门见山来段代码: float.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN

行内元素和块级元素使用浮动后的变化

百度的时候有人说行内元素浮动之后会变成块级元素,于是继续在网上搜索,又有人说不加display:block就变不了会计元素:好的吧,实践出结果,自己试试吧,个人总结了一下: 行内元素设置成浮动之后变得更加像是inline-block(行内块级元素,设置成这个属性的元素会同时拥有行内和块级的特性,最明显的不同是它的默认宽度不是100%),这时候给行内元素设置padding-top和padding-bottom或者width.height都是有效果的以sapn为实现对象,实验代码: <!DOCTY

css样式float造成的浮动“塌陷”问题的解决办法

什么是CSS Float? 定义: float 属性定义元素浮动到左侧或右侧.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级元素,而不论它本身是何种元素.元素对象设置了float属性之后,它将不再独自占据一行.浮动块可以向左或向右移动,直到它的外边缘碰到包含它的框或另一个浮动块的边框为止.fload属性有四个可用的值:Left 和Right 分别浮动元素到各自的方向,None (默认的) 使元素不浮动,Inherit 将会从父级元素