文字加下划线

           如果要给字体加下划线的话，直接用text-decoration:underline，就可以了(如图一)，但是如果是这样的话文字与下划线就会紧得很紧，效果看起来不怎么好看，但是又没有一些属性让文字与下划线的距离隔开一点，暂时知道的方法也就用border-bottom:1px solid black的方法来模仿下划线（如图二），使用这个的话最好加个高度吧!

    <div class="contain">
        <ul>
            <li><a href="#">我是测试一</a></li>
            <li><a href="#">我是测试二</a></li>
            <li><a href="#">我是测试三</a></li>
            <li><a href="#">我是测试四</a></li>
        </ul>
    </div>

Css样式：

 .contain ul li
        {
            height: 26px;
            line-height: 20px;
            text-align: center;
            margin-bottom: 3px;
            list-style-type: none;
        }
        .contain ul li a
        {
            width: 85px;
            height: 22px;
            color: Black;
            display: block;
            text-decoration: none;
            border-bottom: 1px solid black;
        }

                                                          

           有时候，我们需要做一些类似合同签订的css，就是文字下面有下划线，但是没有文字的时候，下划线也同样存在，如果按照上面的方法来做，直接给border-bottom的话，那么当没有内容的时候，下划线就不显示了，如下例子所示：

       <span class="underLine">2013</span>年<span class="underLine"></span>月<span class="underLine">
            23</span>日签订合同

css样式： 

.underLine
  {
     border-bottom: 1px solid red;
  }

                                                           

解决方法：使用padding

  <span class="line">2013</span>年<span class="line"></span>月<span class="line"> 23</span>日签订合同

css样式：

 .line
        {
            padding: 0 1em;
            border-bottom: 1px solid red;
        }

                                                   

转载于:https://www.cnblogs.com/dreamhouse/archive/2013/03/06/2947021.html