1、浮动的小技巧

HTML：

<div>
    <ul>
        <li><a href="#">手机</a></li>
        <li><a href="#">手机</a></li>
        <li><a href="#">手机</a></li>
    </ul>
    <button>购物车</button>
</div>

CSS：

  *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 1000px;
            height: 50px;
            background-color: pink;
            margin-left: auto;
            margin-right: auto;
        }
        ul{
            list-style: none;
            float: left;
        }
        ul:after{
            content: "";
            display: table;
            clear: both;
        }
        li{
            float: left;
            width: 100px;
            line-height: 50px;
            text-align: center;
        }
        li:hover{
            background-color: palevioletred;
        }
        a{
            text-decoration: none;
            color: aliceblue;
        }
        button{
            float: right;

        }