您的位置：首页 > Web前端 > css > 正文

设置超链接宽度和高度

更多时间：2014-10-15 类别：Web前端浏览量：612

设置超链接宽度和高度

设置超链接宽度和高度

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>

标签：超链接

上一篇：使用Console命令调试JS

下一篇：dataset用法

您可能感兴趣

设置超链接宽度和高度

设置超链接宽度和高度

热门推荐

排行榜