ie6,7折行问题

html

              <div class="left">
                    <div class="channel clearfix">
                        <span>品牌营销</span>
                        <div class="content">
                            <a>品牌曝光</a>
                            <a>品牌互动</a>
                            <a>品牌辨析</a>
                            <a>决策工具</a>
                        </div>
                    </div>
                    <div class="channel clearfix">
                        <span>效果营销</span>
                        <div class="content">
                            <a>知心推广</a>
                            <a>搜索推广</a>
                            <a>移动搜索推广</a>
                        </div>
                    </div>
                    <div class="channel clearfix">
                        <span>展示推广</span>
                        <div class="content">
                            <a>网盟推广</a>
                            <a>移动网盟</a>
                            <a>创意专家</a>
                        </div>
                    </div>
                    ...
                </div>

                <div class="right">
                    <div class="channel clearfix">
                        <span>品牌营销</span>
                        <div class="content">
                            <a>品牌曝光</a>
                            <a>品牌互动</a>
                            <a>品牌辨析</a>
                            <a>决策工具</a>
                        </div>
                    </div>
                    <div class="channel clearfix">
                        <span>效果营销</span>
                        <div class="content">
                            <a>知心推广</a>
                            <a>搜索推广</a>
                            <a>移动搜索推广</a>
                        </div>
                    </div>
                    <div class="channel clearfix">
                        <span>展示推广</span>
                        <div class="content">
                            <a>网盟推广</a>
                            <a>移动网盟</a>
                            <a>创意专家</a>
                        </div>
                    </div>
                    ...
                </div>

css

.wrap .left {
    float: left;
    width: 360px;
    margin: 0 10px 30px 30px;
}
.wrap .right {
    float: right;
    margin: 0 30px 30px 0;
}
.wrap .channel {
    padding: 20px 10px 0 10px;
    font-size: 15px;
}
.channel span {
    float: left;
    width: 100px;
    vertical-align: top;
}

.channel a {
    white-space: nowrap;   //若没有此css，会出现奇怪的折行现象
    float: left;
    color: #999;
    text-decoration: none;
    font-size: 12px;
    margin: 3px 5px 3px;
}

折行效果

期待效果

解决方案：给float的<a>（或者float的li，span等都一样）加white-space：nowrap

时间： 2024-10-12 23:07:15

ie6,7折行问题的相关文章

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

浮动标准: W3C CSS 2.1 规范文档里对于浮动元素与非浮动行内元素相邻时的情况有如下解释.以下是关键段落: A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there's a line box, the top of the floated box is al

浏览器对中文标点符号折行的处理差异

网站前台有时候遇到的麻烦很奇怪,前段时间,我遇到了一个问题:chrome下读取中文标点符号时版块错位,而其他浏览器正常. 这是因为各个浏览器对中文标点符号折行的处理有差异. 问题描述制作中文页面并使用标点符号时,不同浏览器对于中文标点的折行判定条件有差异. 造成的影响由于不同浏览器对于中文标点的折行条件有差异,若在对段落文字进行排版布局时,过分依赖当前段落文字自动计算的尺寸可能会产生折行差异,最终可能导致文字布局存在少许差异. 问题分析 1. 中文标点书写规范标点符号是辅助文字记录语言的符号

CSS文字折行与省略号

自适应高度 UILabel自动折行

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 100, 300, 50)]; label.text = @"今天下午全市多云到阴有阵雨或雷雨,今天夜里到明天阴有阵雨,雨量可达大雨. 东北风5-6级阵风7级,逐渐增强到6-7级阵风8级. 今天最高气温:26左右, 明晨最低气温:22左右. 今晨最低气温:21. 今日紫外线等级:2级,照射强度弱,适当防护. 明日洗车指数:4级,天气有雨,不宜洗车."; //清空

div 纯数字很长时无法折行解决

<div style="width:100%;word-wrap:break-word;word-spacing:normal;"> 00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 </div> 加上红色部分属性数字满一行时,会自动折行

textarea的placeholder属性内容折行显示(PC和移动端端)

1.PC端折行方法 placeholder="字体字体" 可以使其折行显示 2.移动端折行方法 webkit内核 textarea::-webkit-input-placeholder:after{ display:block; content:"[email protected] \A line#";/* \A 表示换行 */ color:red; }; 火狐 textarea::-moz-placeholder:after{ content:"[

UIlabel多行文字自动换行（自动折行）

UIView *footerView = [[UIView alloc]initWithFrame:CGRectMake(10, 100, 300, 180)]; UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(10, 100, 300, 150)]; label.text = @"Hello world! Hello world!Hello world! Hello world! Hello world! Hello worl

html中，纯数字或纯英文的一串字符超出父容器不会折行显示，如何解决？

这种情况在软件使用过程中一般不会出现,只有测试人员在测试的时候手比较贱会给你弄一个这种数据,当然这也算是bug吧. 如图:“经营范围”的值严重超出父容器长度,并且没有像“服务信息”一样折行显示.这种情况,我们可以在父容器上加上样式: style="word-break:break-all; word-wrap:break-word;"便可解决.

文本超出显示省略号/数字字母折行有关css 属性

文本超出显示省略号: 定容器宽度 overflow: hidden; text-overflow: ellipsis; 文本超出显示省略号 white-space:nowrap; 强制文本不换行折行 word-break:break-all; 英文单词会分开折行 word-wrap:break-word; 英文单词完整处折行令拓展: word-spacing :5px; 单词/字符之间间隔距离 white-space是字符是否换行显示的. 原文地址:https://www.cnbl