关于ul下li内插入span标签自动换行不在同一行问题 2012-07-17 前端设计 暂无评论 3035 次阅读 前提， `li span {float:right;}` 如果这么写 `<li>小戴<span>2009.05.23</span></li>` 这个日期就会窜到下一行去 而如果这样 `<li><span>2009.05.23</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>测试</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来解决 转自<a href="http://blog.csdn.net/showknow/article/details/6730357" title="http://blog.csdn.net/showknow/article/details/6730357" target="_blank" target="_blank">http://blog.csdn.net/showknow/article/details/6730357</a> 标签: 网页, css, html, span, 换行 本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。