2025年2月15日 星期六 甲辰(龙)年 腊月十五 设为首页 加入收藏
rss
您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

为什么给链接a加边框加不上

时间:03-18来源:作者:点击数:39

因为a是行内元素,要把他变成块状元素才行!

我们在日常敲代码中经常会遇到给链接a加边框加不上的情况!

按道理说是没有问题的,但为什么会加不上呢!

我也是在网上研究了好久才明白的。

在实际网页开发中,我们不是直接给一个图片的,而是给这个图片一个链接,用户一点击图片就可以链接到商品的目标地址。

<a href="#"><img src="#" alt=""> </a>

但是图片是一个块状盒子,如果直接给链接a设置边框,是行不通的。

  • <style>
  • .box {
  • margin: 0 auto;
  • width: 200px;
  • height: 100px;
  • background-color: pink;
  • }
  • a {
  • display: block;
  • border: 10px solid #ccc;
  • }
  • .w {
  • width: 300px;
  • height: 200px;
  • margin: 0 auto;
  • }
  • img {
  • width: 100%;
  • }
  • </style>
  • </head>
  • <body>
  • <div class="w">
  • <a href="#"><img src="2.jpg" alt=""></div></a>
  • </div>

只有给a加上 display:block 之后才能正常显示边框!

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门