JSFiddle - React, Tailwind, and code Playground

by Kang Yuan

HTML

<body>
    <div class="test">
        	<h3>所有分类</h3>

        <div class="fenlei">
            	<h4>精美包包</h4>

            <ul>
                <li>双肩包</li>
                <li style="margin-left:40px;">手提包</li>
                <li>女包</li>
                <li style="margin-left:57px;">男包</li>
            </ul>
        </div>
        <div class="fenlei">
            	<h4>时尚手表</h4>

            <ul>
                <li>充电器</li>
                <li style="margin-left:40px;">男表</li>
                <li>女表</li>
                <li style="margin-left:57px;">情侣表</li>
            </ul>
        </div>
        <div class="fenlei">
            	<h4>时尚化妆品</h4>

            <ul>
                <li>润肤霜</li>
                <li style="margin-left:40px;">面膜</li>
                <li>彩妆用品</li>
            </ul>
        </div>
        <div class="fenlei">
            	<h4>潮流卫衣</h4>

            <ul>
                <li>男士卫衣</li>
                <li style="margin-left:30px;">女士卫衣</li>
                <li>进口卫衣</li>
            </ul>
        </div>
    </div>
</body>

CSS

* {
    margin: 0 auto;
}
.test {
    width: 200px;
    height: 350px;
    border: 1px solid red;
}
h3 {
    background-color: #B90101;
    padding: 5px;
    color: white;
}
.fenlei {
    border-bottom: 1px solid #ccc;
    width: 190px;
    margin-top: 5px;
    margin-left: 5px;
    float: left;
}
.fenlei ul {
    position: relative;
    margin-left: -30px;
    float: left;
}
.fenlei li {
    float: left;
    text-align: left;
    margin-left: 20px;
    margin-top: 5px;
}