span的float问题(li中的span如何不换行)

最新推荐文章于 2022-04-14 18:59:37 发布

玉伟

最新推荐文章于 2022-04-14 18:59:37 发布

阅读量2k

点赞数

分类专栏： span float 文章标签： float class border html 百度

span float 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了HTML中span元素使用float属性时出现的换行问题，并提供了两种解决方案：一是通过调整HTML结构使span元素先于文本显示；二是同时为文本设置float属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

span的float问题(li中的span如何不换行)

前提，li span {float:right;}

如果这么写

<li>邹斌<span>2008.06.01</span></li>

这个日期就会窜到下一行去

而如果这样

<li><span>2008.06.01</span>邹斌</li>

日期和文字就会同行显示

问题出来了，
第一：这是为啥鸟？。。。
第二：如何给span定义属性让他能够在第一种html写法下不换行?

当初来看,比较诡异的现象

仔细分析一下,原来是这样

Span本身虽然是内联元素,但加上浮动后它就变成了块级元素了,所以才会自动换行,

浮动元素的顶端不能高于先于它出现的浮动元素或段落的顶端

看下面这个例子就清楚了:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>asd</title>
<style type=”text/css”>
span#test{float:left; width:300px; height:200px; background:#eee; border:1px solid #ccc;}
span#floattest{width:300px; height:200px; border:1px solid #CCC;}
</style>
</head>
<body>
<span id=”test”>加float宽高有作用,</span>
<span id=”floattest”>不加float宽高无作用</span>
</body>
</html>

所以,上面的例子应该

li{position:relative;}
li span{position:absolute ;right:0px;}
这样来写,如果水平不齐的话

那么可以用个top来解决

//////////////////////////////////////////

<div>
谷歌会稍微好一些，博客小子。
<span class="right">
其实百度是垃圾！！
</span>
</div>

原因:

当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥
也就是说，你的span是float:right，但是你文本还是float:none。

如果要让两者占据同一行，一般有两个解决方法:

第一种：把span先于文本显示

如：

<div>
<span class="right">
其实百度是垃圾！！
</span>
谷歌会稍微好一些，博客小子。
</div>

第二：把文本也设成float

如：

<div>
<span class="right">
其实百度是垃圾！！
</span>
<span class="left">
谷歌会稍微好一些，博客小子。
</span>
</div>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。