当前位置:Web前端 > css> 正文

设置超链接宽度和高度

时间:2014-10-15类别:Web前端

设置超链接宽度和高度

设置超链接宽度和高度

a 标签默认的 display 属性是 inline,width、height 是无效的。可以通过以下方式设置超链接宽度和高度

 

一、利用display:block属性

  •  
  •  
  • HTML 代码   复制
  • 
        <!DOCTYPE html>
        <html>
        <head>
        <meta charset="utf-8" />
        <title>a设置宽度和高度</title>
        <style>
        .abc a{
            display:block;
            width:130px;
           height:30px;
           border:1px solid #000
       }
       </style>
       </head>
       <body>
           <li class="abc">
               <a href="#">宽度130,高30</a>
           </li>
       </body>
       </html>
    
    		
  • 弊端:会让a超链接独占一行

     

    二、设置float:left属性

  •  
  •  
  • HTML 代码   复制
  • 
        <!DOCTYPE html>
        <html>
        <head>
        <meta charset="utf-8" />
        <title>a设置宽度和高度</title>
        <style>
        .abc a{
            float:left;
            width:150px;
           height:50px;
           border:1px solid #000
       }
       </style>
       </head>
       <body>
           <li class="abc">
               <a href="#">宽度150,高50</a>
           </li>
       </body>
       </html>
    
    		
  • 弊端: 会让超链接a浮动,可能会照成与其它文字内容重叠。

     

    三、对a设置padding

  •  
  •  
  • HTML 代码   复制
  • 
        <!DOCTYPE html>
        <html>
        <head>
        <meta charset="utf-8" />
        <title>a设置宽度和高度</title>
        <style>
        .abc a{
            padding:10px 20px;
            width:150px;
           height:50px;
           border:1px solid #000
       }
       </style>
       </head>
       <body>
           <li class="abc">
               <a href="#">宽度150,高50</a>
           </li>
       </body>
       </html>
    
    		
  •  

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐