开发者社区开发与运维文章正文

一点点小随笔：min-width

2016-03-24 1530

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

这里写图片描述

<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8" />
        <title></title>
        <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }

            html,
            body {
                width: 100%;
                font-size: 16px;
                min-width: 1305px;
                overflow: hidden;
            }

            ul {
                list-style: none;
                width: 100%;
                /*border: 1px solid red;*/
                background: gray;
            }

            li {
                margin: 11px;
                text-align: center;
                display: inline-block;
                width: 200px;
                height: 20px;
                border: 1px solid red;
            }

            li:nth-child(5n+1) {
                margin-left: 111px;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $('ul li').eq(0).css('background', 'green');
            })
        </script>

    </head>

    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </body>

</html>