用CSS便可实现的效果，以及解决几个小问题

前言： CSS可以说是网页样式的灵魂，特别是CSS3发布后，更是让网页在无需借助JS的情况下，便可直接使用CSS实现以往无法实现的效果。本文根据日常的开发经验，总结出几个使用CSS就可实现的效果，以及几个小问题跟解决问题的方法

CSS便可实现的效果

1.子元素超出父元素隐藏，且可左右滑动查看隐藏内容（使用在移动端）

效果图：

HTML代码：

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS代码：

ul{
    list-style: none;
    padding: 0;
    border: 2px solid #999;
    width: 100%;
    white-space: nowrap;/*该属性使子元素li不换行，一行排列。即使超出父元素也不换行*/
    overflow: auto;/*超出父元素的那部分子元素隐藏，且可通过滑动查看被隐藏部分*/
}

ul li{
    background-color: blue;
    display: inline-block;/*这里的子元素li，需要转化为内联块元素*/
    border-radius: 30%;
    margin: 2%;
    width: 100px;
    height: 100px;
}

2.CSS实现文本超出显示省略号效果（可指定显示几行）

效果图：

显示一行

显示两行

HTML代码：

<div class="text">CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。</div>

CSS代码：

.text {
      width:300px;
      border: 1px solid #ccc;
      overflow:hidden;
      display:-webkit-box;
      -webkit-line-clamp:1;/*要显示的行数*/
      -webkit-box-orient:vertical;
}

CSS的几个小问题以及解决方法

1.div下的子元素img标签与该父元素高度不一，留有小缝隙

效果图：

问题：子元素与父元素高度留有小缝隙

让两者高度一致，解决方法：将img标签display:block

2.父元素中的子元素span与img如何保持同一水平线

效果图：

问题：span与img没有同一水平高度对齐

解决方法：在span中使用vertical-align: top