`
jveqi
  • 浏览: 322454 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类:
  • HTML
 
阅读更多

转自:http://blog.csdn.net/tb12315/article/details/8519862

 

在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>2012-12-24</span></li>

<li><a href=“#”>BEST SUSHI MENU</a> <span>2012-12-24</span></li>

<li><a href=“#”>BEST SUSHI MENU</a> <span>2012-12-24</span></li>

</ul>

产生原因分析: Span本身虽然是内联元素,但加上浮动后它就变成了块级元素了,所以才会自动换行,浮动元素的顶端不能高于先于它出现的浮动元素或段落的顶端。 解决方案: 1. span和a标签交换位置.

<ul>

<li><span>2012</span><a>BEST SUSHI MENU</a></li>

</ul>

缺点:语义结构发生改变,不合逻辑.

2.

a加左浮动,span加右浮动

3.

使用IE hack 在span标签中加入只有IE6,7可以识别的样式

*margin-top:20px;

_margin-top:20px;

说明,使换行的部分根据margin-top再呈现出来.

4.最佳方案

li{position:relative;}

li span{position:absolute ;right:0px;}

注:在li标签中使用positon:relative,在li span中使用absolute绝对定位来使span内容重新定位。

 

以上是转自别人的博客的解决方法。但是我试验了上边的方法,上边的方法能解决在IE中的问题,但是在webkit内核的浏览器中浏览又会出现同样的问题。

后来试了一下,发现把第二个方法稍微修改一下,两个都会兼容。

方法是按照上边的第二个方法,但是加完以后在a标签的float前加*,使该样式只能在IE中起作用。

#columnlist li a

{

*float: left;

}

分享到:
评论

相关推荐

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

    然而,在某些情况下,这可能会导致意想不到的布局问题,比如"span加float:right右浮动后内容换行下移"的问题,这个问题在描述中已经明确指出。 首先,让我们回顾一下上述示例代码: ```html &lt;!DOCTYPE html&gt; ...

    E7 float:right 时元素换行出现在下一行的bug解决方法

    在网页布局设计中,`float`属性是一个至关重要的CSS特性,它允许元素脱离其正常文档流,从而可以创建多列布局、对齐...然而,在还需要支持旧版IE浏览器的项目中,理解并解决`float:right`引起的换行问题仍然是必要的。

    IE7 float:right 右浮动时元素换行错位的bug解决方法

    本文将详细讨论`float:right`在IE7中遇到的元素换行错位问题以及如何解决这个问题。 首先,我们需要理解`float`属性的工作原理。`float`属性允许元素脱离其正常文档流,向左或向右移动,直到其边缘碰到容器的边框或...

    html转pdf,ITEXT转HTML为PDF解决中文不换行问题

    1、core-renderer.jar该jar包修改过中文不换行问题 public static String getConversionHtmlCode(String linkcss,String htmlCode,String title){ String css = ""; css +="&lt;style&gt;"; css +="table{"; ...

    CSS无难事-浮动floatright的应用和li的高度问题.pdf

    在“CSS无难事-浮动floatright的应用和li的高度问题”这个主题中,我们将探讨`float:right`的用法以及`&lt;li&gt;`元素高度问题的解决策略。 首先,让我们了解`float:right`。当将一个元素的`float`属性设置为`right`时,...

    多浏览器下IE6 IE7 firefox li 间距问题

    ### 解决多浏览器下IE6、IE7及Firefox中`&lt;li&gt;`元素间距兼容性问题 #### 背景介绍 在Web开发过程中,我们经常会遇到不同浏览器对CSS样式的解析差异导致页面显示效果不一致的情况。特别是对于早期版本的Internet ...

    关于IE标签LI文字换行问题

    在使用UL和LI显示文字的时候,由于IE浏览器对LI的文字长度没有默认强制令起一行。导致如果文字超出UL设定的宽度再先有的位置上折行,造成显示问题。 解决方法: 复制代码代码如下: ul li{ white-space:nowrap; } ...

    div-css-漂亮的导航条

    #tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #tabs1 a:hover { background-position:0% -42px; } #tabs1 a:hover span { background-position:100% -42px...

    CSS中如何把Span标签设置为固定宽度.pdf

    在本文中,我们将探讨如何在不同情况下将Span标签设置为固定宽度,并理解不同display属性的差异。 首先,让我们了解为何直接给Span标签设置width属性无效。这是因为按照CSS标准,对于inline元素,width和height属性...

    float元素浮动后高度不一致导致错位的解决办方法

    但是当高度不一致时,就需要想别的办法来解决了: 1、给父元素定义font-size:0; 浮动子元素定义需要的font-size, 再定义display:inline-block;vertical-align:top; 复制代码代码如下: ul{ margin:0; padding:0; ...

    css 跨浏览器实现float:center

    需要注意的是,这种方法可能在某些特定情况下产生问题,比如当`&lt;li&gt;`元素的宽度比`&lt;ul&gt;`的宽度小时,`right: 50%`可能会超出`&lt;ul&gt;`的边界。此外,由于使用了浮动,`&lt;ul&gt;`的高度不会自动扩展以包含所有`&lt;li&gt;`元素,...

    HTML中Li标签的使用示例

    3. **CSS样式调整**:给`#mylist li span`设置`float:right`,使日期元素向右浮动。同时,为了保持列表项的宽度一致,可以为`#mylist`设置宽度,比如`width:400px`。 ```css #mylist { width: 400px; list-style-...

    li:hover的解决方案

    ### IE6中的`li:hover`问题及解决方案 #### 背景介绍 早期浏览器的兼容性问题一直是前端开发者面临的一大挑战。特别是在Internet Explorer 6(简称IE6)中,由于其对CSS支持的限制,很多现代网页设计效果都无法正常...

    纯数字或者字母不换行解决方法

    通过以上介绍,我们可以看到,利用CSS中的`word-wrap`和`word-break`属性,能够轻松解决纯数字或字母串不换行的问题,同时保证页面布局的整洁和美观。这对于提高用户体验和页面质量具有重要意义。

    制作div+css带箭头的新闻list模块

    float: right;/*使span元素浮动到右面*/ text-align: right;/*日期右对齐*/ padding: 6px 0px 4px 15px; font-size:13px; } .list li a:hover{ color: #336699; background: url(zf11_Guide.gif) no-repeat 0...

    css span右对齐 css li标签中span日期靠右布局实现代码

    这个问题的解决方案涉及到CSS(层叠样式表)中的定位属性和浮动概念。在给出的示例中,通过CSS样式实现了`li`标签中的`span`日期元素向右对齐。 首先,我们来看一下关键CSS代码: ```css .artlist ul li span { ...

    JavaScript使用ul中li标签实现删除效果

    本文实例为大家分享了js使用ul中li标签实现删除效果的具体代码,供大家参考,具体内容如下 &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&...

Global site tag (gtag.js) - Google Analytics