zoukankan      html  css  js  c++  java
  • 文字加下划线

               如果要给字体加下划线的话,直接用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
            {
                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;
            }

                                                       

  • 相关阅读:
    【动态规划】 EditDistance
    招聘
    算法01 C语言设计
    keras04
    电影《邪不压正》打动我的
    Eclipse
    6.面向对象编程(下)2
    获取一个1-100之间的随机数
    java如何使用帮助文档api
    3.java基础语法(下)
  • 原文地址:https://www.cnblogs.com/dreamhouse/p/2947021.html
Copyright © 2011-2022 走看看