转自: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） 
好了，说到这大家应该恍然大悟了吧

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

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

    在IE6,IE7下使用标签时,在加入右浮动样式(float:right)后,会换行的bug解决方案:bug案例:新闻列表中,为使时间右对齐,加右浮动产生换行 <ul> <li> ...

  2. IE下a标签后面的span元素向右浮动后错位

    错误原因span放在了a标签之后 正确写法是放在之前 如下: <li><span>2016-07-29</span><a href="#" ...

  3. 解决多个div左浮动后不换行问题

    问题描述:我这里有多个li 让其左浮动,并且有序没有间隙的排列,就出现了中间空隙的问题: 解决办法:让每一个的第1个元素加上 clear:both属性,我这里每一行有2个,所以是: .b li:nth ...

  4. css浮动（folat），清除浮动（clear）（另加两种清除浮动方式，总共三种清除浮动方式）

    css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中 浮动值: left:向左浮动 right:向右 ...

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

    什么是CSS Float? 定义: float 属性定义元素浮动到左侧或右侧.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级元素,而不论 ...

  6. span 右浮动折行 解决ie6/7中span右浮动折行问题

    A floated box is shifted to the left or right until its outer edge touches the containing block edge ...

  7. span 右浮动折行 解决ie6/7中span右浮动折行问题

    RM8005: IE6 IE7 IE8(Q) 中行内元素后相邻的浮动元素在某些情况下会折行放置在之前行内元素所在行框的底部 标准参考 W3C CSS 2.1 规范文档里对于浮动元素与非浮动行内元素相邻 ...

  8. CSS定位机制：浮动 float及清除浮动的常用方法

    CSS的定位机制 1.普通流(标准流) 默认状态,元素自动从左往右,从上往下排列 块元素的特征: 独占一行 可以设置宽高 如果不设置宽度,宽度默认为容器的100% 常见的块元素:div p h1-h6 ...

  9. ie6/7/8中span右浮动折行问题的解决方案

    浮动标准: W3C CSS 2.1 规范文档里对于浮动元素与非浮动行内元素相邻时的情况有如下解释.以下是关键段落: A floated box is shifted to the left or ri ...

随机推荐

  1. 【macOS使用技巧】使用空格键快速预览文件内容

    Quickview 是mac系统上一个强大的预览功能, 可以预览 mp4 mov等音频文件, 当然图片.文本.也都可以进行预览. 在系统中如果你希望快速浏览一下文件而不想打开的文件的话只要选择文件然后 ...

  2. 除了降低成本和加速数字化转型，低代码还能给企业带来什么价值 ZT

    翻译自:https://dzone.com/articles/measuring-the-roi-of-low-code-1,有删改 低代码 是一种近些年兴起的企业软件快速开发技术和工具.借助低代码使 ...

  3. 在阿里云服务器上安装mysql及重置密码

    参考链接:https://www.cnblogs.com/ljysy/p/10324854.html 下载与安装MySQL: 这里采用Yum管理好了各种rpm包的依赖,能够从指定的服务器自动下载RPM ...

  4. STL中的Set和Map——入门新手篇

    STL中的Set和Map 先来看一段网络上的文字描述: 上图是一段关于STL中Set集合的描述,同样的,也近似适合Map的描述.上述文字中,描述了最为重要的特征: Set和Map,底层调用了红黑树的结 ...

  5. 如何将文本放置在div的底部显示呢？

    转自:将文本定位于div的底部的方法  摘要: 下文讲述将文本放于div的底部的两种方法,如下所示: 实现思路: 思路1:采用绝对定位的方式,将其放置于div的底部 思路2:使用Line-height ...

  6. Docker实战部署JavaWeb项目-基于SpringBoot

    最近在滴滴云上看到服务器很便宜,1核2G,1年只需要68块钱.下面是我基于Docker部署Javaweb服务的过程.目前我见过的最便宜的服务器,阿里云打折的时候都没有这么便宜啊,果断入手.有需要的话可 ...

  7. LOJ6287 诗歌

    题意 给定一个排列,问是否存在\(\forall a,b,a\neq b\)满足\(2|(a+b)\)且\(\frac{a+b}{2}\)在\(a,b\)间 做法 枚举中点\(a\),即需要存在类似\ ...

  8. Balanced Lineup POJ - 3264

    #include<iostream> #include<cstdio> #include<cstring> #include<algorithm> us ...

  9. 【Newtonsoft.Json】json序列化小驼峰格式（属性名首字母小写）

    我是一名 ASP.NET 程序员,专注于 B/S 项目开发.累计文章阅读量超过一千万,我的博客主页地址:https://www.itsvse.com/blog_xzz.html 只需要设置JsonSe ...

  10. ng-项目结构

    ng启动过程 目录结构 . ├── e2e 端到端测试(暂且不关心) ├── node_modules npm安装的第三方包 ├── src 存放业务源码 ├── .angular-cli.json ...