.friends-list-content { height: 520px; overflow-y: scroll; } .friends-list-content::-webkit-scrollbar { width:14px; height: 15px; } .friends-list-content::-webkit-scrollbar-track, .friends-list-content::-webkit-scrollbar-thumb { border-radius: 999px; border: 5px solid transparent; } .friends-list-content::-webkit-scrollbar-track { box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset; } .friends-list-content::-webkit-scrollbar-thumb { min-height: 20px; background-clip: content-box; box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset; } .friends-list-content::-webkit-scrollbar-corner { background: transparent; }
<!Doctype> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport"/> <link href="base.css" rel="stylesheet" type="text/css"> <style type="text/css"> .friends-list { font-size: 14px; width: 300px } .friends-list h3 { display: inline-block; } .friends-list ul { } .friends-list ul li { padding: 10px; position: relative; background: #F5F5F5; border-bottom: 1px solid #e1e1e1; } .friends-list ul li dl { } .friends-list ul li dl dt { padding: 2px 0px; } .friends-list ul li dl h3{ width: 85px; font-size: 14px; } .friends-list ul li dl dd { padding: 2px 0px; } a.view { position: absolute; right: 10px; top: 20px; display: inline-block; padding: 2px 8px; border: 1px solid; border-color: #e1e1e1; } a.choose { position: absolute; right: 10px; top: 50px; padding: 2px 8px; border: 1px solid; border-color: #e1e1e1; } a.chosed { border-color: #fff; background: #e45050; color: #fff; } .friends-list-content { height: 520px; overflow-y: scroll; } .friends-list-content::-webkit-scrollbar { width:14px; height: 15px; } .friends-list-content::-webkit-scrollbar-track, .friends-list-content::-webkit-scrollbar-thumb { border-radius: 999px; border: 5px solid transparent; } .friends-list-content::-webkit-scrollbar-track { box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset; } .friends-list-content::-webkit-scrollbar-thumb { min-height: 20px; background-clip: content-box; box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset; } .friends-list-content::-webkit-scrollbar-corner { background: transparent; } </style> </head> <body> <div class="friends-list"> <h3 style="padding: 0px 10px 10px;font-weight: 600">我的客户列表</h3> <div class="friends-list-content"> <ul id="friends-list-ul"> <li> <dl> <dt> <h3>客户名称</h3> <span>test</span> </dt> <dd> <h3>联系方式</h3> <span>15874848596</span> </dd> <dd> <h3>车牌牌照</h3> <span>沪A23455</span> </dd> </dl> <a class="view" href="javascript:;"> 查看 </a> <a class="choose" href="javascript:;"> 选择 </a> </li> <li> <dl> <dt> <h3>客户名称</h3> <span>test</span> </dt> <dd> <h3>联系方式</h3> <span>15874848596</span> </dd> <dd> <h3>车牌牌照</h3> <span>沪A23455</span> </dd> </dl> <a class="view" href="javascript:;"> 查看 </a> <a class="choose" href="javascript:;"> 选择 </a> </li> <li> <dl> <dt> <h3>客户名称</h3> <span>test</span> </dt> <dd> <h3>联系方式</h3> <span>15874848596</span> </dd> <dd> <h3>车牌牌照</h3> <span>沪A23455</span> </dd> </dl> <a class="view" href="javascript:;"> 查看 </a> <a class="choose" href="javascript:;"> 选择 </a> </li> <li> <dl> <dt> <h3>客户名称</h3> <span>test</span> </dt> <dd> <h3>联系方式</h3> <span>15874848596</span> </dd> <dd> <h3>车牌牌照</h3> <span>沪A23455</span> </dd> </dl> <a class="view" href="javascript:;"> 查看 </a> <a class="choose" href="javascript:;"> 选择 </a> </li> <li> <dl> <dt> <h3>客户名称</h3> <span>test</span> </dt> <dd> <h3>联系方式</h3> <span>15874848596</span> </dd> <dd> <h3>车牌牌照</h3> <span>沪A23455</span> </dd> </dl> <a class="view" href="javascript:;"> 查看 </a> <a class="choose" href="javascript:;"> 选择 </a> </li> <li> <dl> <dt> <h3>客户名称</h3> <span>test</span> </dt> <dd> <h3>联系方式</h3> <span>15874848596</span> </dd> <dd> <h3>车牌牌照</h3> <span>沪A23455</span> </dd> </dl> <a class="view" href="javascript:;"> 查看 </a> <a class="choose" href="javascript:;"> 选择 </a> </li> <li> <dl> <dt> <h3>客户名称</h3> <span>test</span> </dt> <dd> <h3>联系方式</h3> <span>15874848596</span> </dd> <dd> <h3>车牌牌照</h3> <span>沪A23455</span> </dd> </dl> <a class="view" href="javascript:;"> 查看 </a> <a class="choose" href="javascript:;"> 选择 </a> </li> <li> <dl> <dt> <h3>客户名称</h3> <span>test</span></dt> <dd> <h3>联系方式</h3> <span>15874848596</span></dd><dd> <h3>车牌牌照</h3> <span>沪A23455</span></dd> </dl> <a class="view" href="javascript:;">查看</a><a class="choose" href="javascript:;">选择</a></li> <li> <dl> <dt> <h3>客户名称</h3> <span>test</span></dt> <dd> <h3>联系方式</h3> <span>15874848596</span></dd><dd> <h3>车牌牌照</h3> <span>沪A23455</span></dd> </dl> <a class="view" href="javascript:;">查看</a><a class="choose" href="javascript:;">选择</a></li> <li> <dl> <dt> <h3>客户名称</h3> <span>test</span></dt> <dd> <h3>联系方式</h3> <span>15874848596</span></dd><dd> <h3>车牌牌照</h3> <span>沪A23455</span></dd> </dl> <a class="view" href="javascript:;">查看</a><a class="choose" href="javascript:;">选择</a></li> <li> <dl> <dt> <h3>客户名称</h3> <span>test</span></dt> <dd> <h3>联系方式</h3> <span>15874848596</span></dd><dd> <h3>车牌牌照</h3> <span>沪A23455</span></dd> </dl> <a class="view" href="javascript:;">查看</a><a class="choose" href="javascript:;">选择</a></li> <li> <dl> <dt> <h3>客户名称</h3> <span>test</span></dt> <dd> <h3>联系方式</h3> <span>15874848596</span></dd><dd> <h3>车牌牌照</h3> <span>沪A23455</span></dd> </dl> <a class="view" href="javascript:;">查看</a><a class="choose" href="javascript:;">选择</a></li> <li> <dl> <dt> <h3>客户名称</h3> <span>test</span></dt> <dd> <h3>联系方式</h3> <span>15874848596</span></dd><dd> <h3>车牌牌照</h3> <span>沪A23455</span></dd> </dl> <a class="view" href="javascript:;">查看</a><a class="choose" href="javascript:;">选择</a></li> <li> <dl> <dt> <h3>客户名称</h3> <span>test</span></dt> <dd> <h3>联系方式</h3> <span>15874848596</span></dd><dd> <h3>车牌牌照</h3> <span>沪A23455</span></dd> </dl> <a class="view" href="javascript:;">查看</a><a class="choose" href="javascript:;">选择</a></li> <li> <dl> <dt> <h3>客户名称</h3> <span>test</span></dt> <dd> <h3>联系方式</h3> <span>15874848596</span></dd><dd> <h3>车牌牌照</h3> <span>沪A23455</span></dd> </dl> <a class="view" href="javascript:;">查看</a><a class="choose" href="javascript:;">选择</a></li> <li> <dl> <dt> <h3>客户名称</h3> <span>test</span></dt> <dd> <h3>联系方式</h3> <span>15874848596</span></dd><dd> <h3>车牌牌照</h3> <span>沪A23455</span></dd> </dl> <a class="view" href="javascript:;">查看</a><a class="choose" href="javascript:;">选择</a></li> <li> <dl> <dt> <h3>客户名称</h3> <span>test</span></dt> <dd> <h3>联系方式</h3> <span>15874848596</span></dd><dd> <h3>车牌牌照</h3> <span>沪A23455</span></dd> </dl> <a class="view" href="javascript:;">查看</a><a class="choose" href="javascript:;">选择</a></li> </ul> </div> </div> </div> </body> </html>
