项目中我们经常会遇到一些类似于新闻列表的布局，例如下面的栗子：

那么中间的横线该如何自适应实现呢？

其实也简单，只要把横线设置为背景图片，然后给左边的标题和右边的更新时间设置与页面相同的背景色即可，用来遮挡横线背景。具体代码如下：

页面结构html：

<ul class="video_list con">
  <li>
    <a href="#">
      <h4>3D3SV13.0演示视频-网壳整体稳定性分析</h4>
      <i>（2017-09-08更新）</i>
    </a>
  </li>
</ul>

核心CSS代码：

.video_list{
  width: 1000px;
  margin-top: 50px;
  margin-bottom: 50px;
}
.video_list li{
  width: 100%;
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 30px;
}
.video_list li a{
  display: block;
  color: #434343;
  background: url(../images/common/list_bg.png) repeat-x;
  background-position: left center;
}
.video_list li a:hover{
 color: #b2b2b2;
}
.video_list li h4{
  display: inline-block;
  background-color: #fff;
}
.video_list li i{
  float: right;
  background-color: #fff;
}

以上，就简单的实现了，列表中间横线自适应的效果了。当然，要实现这样的效果还有很多方法，这里只是简单的介绍一种最普通的方法。

Over~拜