zoukankan      html  css  js  c++  java
  • 大量链接列表时不会在文字中间断行

    如题,大量链接列表时不会在文字中间断行,上次做友情链接的时候一直没有找到方法。
    曾经试过用<wbr>加<nobr>来有选择地分行,结果IE成功,FF不支持。
    今天分析sohu博客首页,搞定。原来以前没有搜索正确啊,现在一搜居然早就有答案了 :(

    放在这里,最近正好要用到,希望有需要用的朋友能看到。

    <style>
    .list
    {
        width
    :500px;
    }
    .list ul li
    {
        white-space
    : nowrap;
        float
    :left;
    /*    display:inline;*/
    }
    </style>
    </HEAD>

    <BODY>
    <div class="list">
        
    <ul>
            
    <li><href="#">余秋雨</a>|</li>
            
    <li><href="#">易中天</A>|</li>
            
    <li><href="#">徐兆寿</a>|</li>
            
    <li><href="#">易宪容</a>|</li>
            
    <li><href="#">吴澧</a>|</li>
            
    <li><href="#">黎鸣</a>|</li>
            
    <li><href="#">张起淮</A>|</li>
            
    <li><href="#">傅国涌</a>|</li>
            
    <li><href="#">李银河</a>|</li>
            
    <li><href="#">司马南</A>|</li>
            
    <li><href="#">庄羽</a>|</li>
            
    <li><href="#">魏子</A>|</li>
            
    <li><href="#">汪丁丁</a>|</li> 
            
    <li><href="#">马少华</a>|</li>
            
    <li><href="#">张五常</a>|</li>
            
    <li><href="#">张维迎</A>|</li>
            
    <li><href="#">洪峰</a>|</li>
            
    <li><href="#">思公</A>|</li>
            
    <li><href="#">王少磊</A>|</li>
            
    <li><href="#">章立凡</A>|</li>
            
    <li><href="#">王育琨</A>|</li>
            
    <li><href="#">蔡天新</A>|</li>
            
    <li><href="#">高光</a>|</li>
            
    <li><href="#">苏芩</a>|</li>
            
    <li><href="#">周国平</a>|</li>
            
    <li><href="#">徐小平</A>|</li>
            
    <li><href="#">李文子</A>|</li>
            
    <li><href="#">袁熙坤</A>|</li>
            
    <li><href="#">忆清</a>|</li>
            
    <li><href="#">石康</A>|</li>
            
    <li><href="#">陈志武</A>|</li>
            
    <li><href="#">步非烟</A>|</li>
            
    <li><href="#">古清生</a>|</li>
            
    <li><href="#">葛红兵</a>|</li>
            
    <li><href="#">端木</A>|</li>
            
    <li><href="#">国忠</A>|</li>
        
    </ul>
    </div>

    其实,就一个white-space:nowrap;搞定。
  • 相关阅读:
    Product
    Testing
    mysql 获取当前日期及格式化
    Windows下重置Mysql密码
    如何在CLI命令行下运行PHP脚本,同时向PHP脚本传递参数?
    PHP和shell脚本遍历目录及其下子目录
    检测你的php代码执行效率
    NGINX 502 Bad Gateway
    linux文件类型详解
    查询软件和硬件列表清单[将文章里代码另存为 list.vbs,双击运行就会出现一个html页面]
  • 原文地址:https://www.cnblogs.com/nonlyli/p/684622.html
Copyright © 2011-2022 走看看