阅读,让一切有所不同
当前位置:主页 > 百科知识 > 计算机 >

A标签加宽度和高度-CSS设置超链接A标签宽度和高度方法

发布时间:2017-10-28 编辑:一米阳光

CSS设置超链接A标签宽度和高度方法,在A标签宽度和高度实现。

解决方法:

1、对a标签样式加display:inline-block;加后实现成块状属性

2、float,对a样式盒子float:left让它成浮动

3、当然以上两种方法一个弊端,第一种会让a独占一行,第二种方法会让a浮动,可能会照成与其它html冲突。第三种方法为设置padding,a设置什么样式达到我们想要的宽度和高度效果。

CSS+DIV实例示范对A控制宽度和高度样式

一、使用display:block实现a宽度和高度 

DIVCSS5对一个CSS样式display:block即可让高度宽度生效。

1、完整html源代码(DIV+CSS):

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>a设置宽度和高度 DIVCSS5演示</title> 
  6. <style> 
  7. .abc a{ display:block;width:130px;height:30px;border:1px solid #000} 
  8. </style> 
  9. </head> 
  10.  
  11. <body> 
  12. <div class="abc"> 
  13. <a href="#">我宽度80,高30</a> 
  14. </div> 
  15. </body> 
  16. </html> 

2、实例截图

对a设置display:block,让宽度高度生效

对a设置display:block,让宽度高度生效。

二、使用float浮动实现a高度宽度

同样,DIVCSS5对一个CSS命名为".abc"里的a设置width为80px,height:30px,为了观察效果设置一黑色边框。大家会看见对a设置float:left,依然可以对a设置宽度高度生效。

1、完整HTML代码:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>a设置宽度和高度 DIVCSS5演示</title> 
  6. <style> 
  7. .abc a{ float:left;width:130px;height:30px;border:1px solid #000} 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <div class="abc"> 
  12. <a href="#">我宽度80,高30</a> 
  13. </div> 
  14. </body> 
  15. </html> 

2、使用float让a标签宽度高度生效截图

float解决a的宽度高度不能生效截图

css float解决a的宽度高度不能生效截图

三、可以完美替代以上两种方法解决a宽度高度效果方法

DIVCSS5对A对象设置padding即可实现我们想要的效果。DIVCSS5还是通过实例方法印证给出解决经验方法。

1、css padding替代a标签宽度高度效果代码如下:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>a宽度和高度生效 DIVCSS5演示</title> 
  6. <style> 
  7. .abc a{padding:10px 20px;border:1px solid #000} 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <div class="abc"> 
  12. <a href="#">我宽度80,高30</a>挨着内容 
  13. </div> 
  14. </body> 
  15. </html> 

2、css a模拟宽度高度效果截图

通过css padding实现宽度高度效果模拟

通过css padding实现宽度高度效果模拟

四、divcss5总结

总结:通过以上方法都在不同情况下都可以使用,所以要实现一个样式效果,不仅仅是使用常规的CSS属性单词,大家大可灵活应用其它CSS样式实现相同效果,所以大家学习CSS时候一定灵活多变,在不同情况下千变万化地使用各种CSS样式单词,遵循以效果为目的,以简便高效为原则地应用CSS和学习DIVCSS。

分享这篇文章:
 

看过本文的人还喜欢以下文章

li设置float属性后ul没有高度怎么解决
li设置float属性后ul没有高度怎么解决
方法一:给ul增加overflow:hidden;属性就可以了。 代码: .divname ul {margin:0px auto;overflow:hidden;} 或者一个定值也可以的。 方法二:ul高度不能自动适应了,其根本原因在于没有清除浮动! 或者给UL也设置浮动,不过这样比...
超全手机网页移动meta标签详解【史上最全完整版】
超全手机网页移动meta标签详解【史上最全完整版】
移动手机浏览器通常有以下五大mete,包括:Meta之apple-mobile-web-app-capable(控制菜单栏显示,通常不需要)、format-detection(标记是否识别电话号码等)、apple-mobile-web-app-status-bar-style(调整顶部状态...
推荐阅读...

 

以上就是阳光美文网为您精心整理提供的关于《A标签加宽度和高度-CSS设置超链接A标签宽度和高度方法》全文,希望对您有所帮助。