ie7兼容性问题,ul宽度固定后,多余li换行排列不整齐-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

ie7兼容性问题,ul宽度固定后,多余li换行排列不整齐

2016-05-26 16:40:27 1909 1

screenshot

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <!--[if lt IE 9]>
    <script src="../js/html5shiv.js"></script>
    <![endif]-->
    <style>
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    ul {
        margin-top: 100px;
        margin-left: 100px;
        width: 417px;
        list-style: none;
    }
    ul li {
        height: 22px;
        line-height: 23px;
        float: left;
    }
    ul li a {
        height: 14px;
        padding-left: 8px;
        padding-right: 8px;
        border-left: 1px solid red;
        color: red;
        text-decoration: none;
        font-size: 12px;
    }
    </style>
</head>
<body>
    <ul class="clearfix">
        <li><a href="#">免费</a>
        </li>
        <li><a href="#">小说</a>
        </li>
        <li><a href="#">励志与成功</a>
        </li>
        <li><a href="#">婚姻/两性</a>
        </li>
        <li><a href="#">小说</a>
        </li>
        <li><a href="#">小说</a>
        </li>
        <li><a href="#">畅读VIP</a>
        </li>
        <li><a href="#">励志与成功</a>
        </li>
        <li><a href="#">励志与成功</a>
        </li>
        <li><a href="#">励志与成功</a>
        </li>
        <li><a href="#">励志与成功</a>
        </li>
        <li><a href="#">励志与成功</a>
        </li>
    </ul>
</body>
</html>
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:16:32

    `
    li { white-space:nowrap; }
    `

    0 0
相关问答

12

回答

在阿里云上安装和运行Node.js全功略

ycwong 2013-09-18 15:17:30 66113浏览量 回答数 12

19

回答

【分享】如何提高网站的打开速度?

enj0y 2012-11-17 14:35:22 57705浏览量 回答数 19

145

回答

【新手入门】云服务器linux使用手册

fanyue88888 2012-11-26 17:14:18 159390浏览量 回答数 145

28

回答

钉钉开放平台“常见问题常见问题常见问题“重要请关注

竹梅 2015-12-03 00:39:14 95921浏览量 回答数 28

22

回答

爬虫数据管理【问答合集】

我是管理员 2018-08-10 16:37:41 148510浏览量 回答数 22

31

回答

[@倚贤][¥20]刚学完html/css/js的新手学习servlet、jsp需要注意哪些问题?

弗洛伊德6 2018-10-27 21:52:43 147484浏览量 回答数 31

23

回答

【云服务器分享】网站访问速度快才是硬道理

dreamdoo 2012-10-15 10:15:02 86367浏览量 回答数 23

251

回答

阿里云LNAMP(Linux + Nginx + Apache + MySQL + PHP)环境一键安装脚本

云代维 2014-02-14 15:26:06 309276浏览量 回答数 251

13

回答

【云服务器分享】如何节省网站流量

dreamdoo 2012-10-15 10:36:09 81439浏览量 回答数 13

15

回答

对象存储oss【问答合集】

我是管理员 2018-08-03 14:54:02 69073浏览量 回答数 15
+关注
0
文章
14879
问答
问答排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载