zoukankan      html  css  js  c++  java
  • div ul li 加a 错位问题

    最近写页面过程中出现问题,在li 中包含的<a>元素,切内容是中文和字母交杂的状况下页面排版错位。造成这个原因有两点

    1.li{ float:left}没设置。

    2.中文和字母交杂时没有定义li的高度。

    html如下。

    <div id="link_list">
        <ul>
         <li><a href="#">腾讯旅游 |</a></li>
         <li><a href="#">春秋航空</a> |</li>
         <li><a href="#">乐途旅游网</a> |</li>
         <li>途牛旅游网 |</li>
         <li>51766旅游网 |</li>
         <li>沈阳旅游网 |</li>
         <li>万国商业网 |</li>
         <li>19楼空间 |</li>
         <li>慧聪网 |</li>
         <li>第三媒体 |</li>
         <li>美丽说 |</li>
         <li><a>京酒店北京酒店北京酒店北京酒店<a> |</li>
         <li>香港酒店 |</li>
         <li>青岛酒店 |</li>
         <li>杭州酒店 |</li>
         <li>上海酒店 |</li>
         <li>深圳酒店 |</li>
         <li>如家快捷 |</li>
         <li> <a>7天酒店00000000000000000000000000000000 </a>|</li>
         <li>汉庭连锁 |</li>
         <li>速8连锁 |</li>
         <li>格林豪泰 |</li>
         <li>锦江之星 |</li>
         <li>酒店评论 |</li>
         <li>连锁酒店北京机票 |</li>
         <li>深圳机票 |</li>
         <li>上海机票 |</li>
         <li>海南航空 |</li>
         <li>深圳航空 |</li>
         <li>厦门航空 |</li>
         <li>山东航空 |</li>
         <li>南京机票 |</li>
         <li>上航推荐 |</li>
         <li>川航机票 |</li>
         <li>春秋机票 |</li>
         <li>国航特价 |</li>
         <li>飞机票 |</li>
      </ul>
    </div>

    css如下

    #link_list {
         float: left;
         margin:7px;
        }
    #link_list li
    {
        float:left;
        white-space:nowrap;
        margin:3px 4px;
        height:21px;/*不设置则会出现错位置*/
    }

  • 相关阅读:
    轻松把你的项目升级到PWA
    聊聊React高阶组件(Higher-Order Components)
    java NIO系列教程2
    java NIO系列教程1
    个人笔记
    onclick时间加return和不加return的区别
    URL编码分析与乱码解决方案
    第九天 1-8 RHEL7软件包管理
    第八天 RHEL7.2 文件权限管理(第一部分)
    第七天 Linux用户管理、RHEL6.5及RHEL7.2 root密码破解、RHEL6.5安装vmware tools
  • 原文地址:https://www.cnblogs.com/lecone/p/1899944.html
Copyright © 2011-2022 走看看