手机站滚动导航代码(纯CSS)

毒药      37阅读

手机站滚动导航代码,纯CSS写法:

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>手机站滚动导航代码(纯CSS)</title>
 
    <style>
.tab-head{
   border-top: 1px solid #ccd3e4;
    list-style-type: none;
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
    padding:0;
   overflow:auto;
}
.tab-head-item{
    flex:1 0 auto;
    color:#000;
    padding:4px 5px 5px!important;
}
    </style>
</head>

<body>
<div >
    <ul class="tab-head" >
        <li class="tab-head-item">导航导航</li>
        <li class="tab-head-item">导航导航</li>
        <li class="tab-head-item">导航导航</li>
        <li class="tab-head-item">导航导航</li>
        <li class="tab-head-item">导航导航</li>
        <li class="tab-head-item">导航导航</li>
        <li class="tab-head-item">导航导航</li>
        <li class="tab-head-item">导航导航</li>
        <li class="tab-head-item">导航导航</li>
        <li class="tab-head-item">导航导航</li>
        <li class="tab-head-item">导航导航</li>
    </ul>
</div>
</body>
</html>

   37阅读
目前尚无回复
登录 后发表评论