案例4

 

如果实现这种样式？

先写html

<style>
    *{margin:0;padding:0;}
    ul,li{ list-style: none;}    
    a{text-decoration :none;}
    .box{width: 500px;background-color: #f1f1f1;height: 200px;}
</style>
<body>
<div class="box">
    <ul>
        <li><a href="">【泰牛访谈用户篇】“有位屌丝”在路上</a><span>2017-03-11</span></li>
        <li><a href="">【泰牛访谈用户篇】“有位屌丝”在路上</a><span>2017-03-11</span></li>
        <li><a href="">【泰牛访谈用户篇】“有位屌丝”在路上</a><span>2017-03-11</span></li>
        <li><a href="">【泰牛访谈用户篇】“有位屌丝”在路上</a><span>2017-03-11</span></li>
    </ul>
</div>
</body>

 

,思路：日期要向右浮动。

于是 

.box ul li span{float:right;color:gray;}

怎么添加下边框呢？正确的方式应该是给li设定高度，然后li里面元素的行高就是高度就完美匹配了：

.box ul li{height: 30px;line-height: 30px;border:1px dashed #ddd;padding:0 5px 0;}

在这里提一下，我以前的方式是给li添加padding-bottom，再给li添加margin-bottom，这样能实现，但是最后一个li元素还有margin-bottom占空间，而且代码不够严谨

 

posted @ 2019-01-23 11:22  cl94  阅读(103)  评论(0)  编辑  收藏  举报