【问题标题】:HTML/CSS Image with link border not fully around image [duplicate]带有链接边框的 HTML/CSS 图像未完全围绕图像 [重复]
【发布时间】:2020-10-03 04:40:19
【问题描述】:

我有一张主页图片,可将用户带回主屏幕。我正在使用 Symfony 5。

这是 HTML:

<a id="home-link" href="{{ path('app_mainRedirect') }}"> <img src="{{ asset('images/home-icon.png') }}" width="100" > </a> 

这是 CSS:

#home-link { border-style:double;}

图像显示正常,链接有效,但奇怪的是边框的顶部显示在图像的一半。右下角还有一个 _,我在填充区域中无法解释。如果有任何想法,我将不胜感激,请提前致谢。

编辑:我添加了一张图片。

编辑 2:根据建议,如果我应用 display: 块,它看起来像这样:

【问题讨论】:

  • 如果您无法提供工作示例,请提供图片。它比文字更有帮助。
  • 如果您申请display: block,它会得到修复吗?
  • #home-link { border-style:double;width:100px; height:100px;} 是否可以解决您的问题
  • 如果你根本不想要边框#home-link { border: none;}试试这个
  • 感谢您的帮助。我已经按照上面的方法进行了编辑以显示 display: block 的作用,有趣的是它确实有一些效果并且已经摆脱了 _ 所以我想知道这是否沿着正确的轨道。宽度:100 像素;高度:100px;没有效果,这本身似乎很奇怪。你说得对,保罗,我真的不想要边界,这是我想要摆脱的 _ 但是当我添加边界时,我可以看到发生了一些奇怪的事情,所以想弄清楚发生了什么在那里。再次感谢您的帮助。

标签: html css


【解决方案1】:

在锚标签中添加display: inline-block;,它将在图像周围正确显示边框。

还要将text-decoration: none; 添加到锚点以删除下划线(_)。

【讨论】:

  • 非常感谢,没想到是链接的下划线。
【解决方案2】:

我想这会让它按你的预期工作

#home-link { border: none;}

【讨论】:

    猜你喜欢
    • 2013-11-09
    • 1970-01-01
    • 2021-09-23
    • 2020-09-15
    • 2013-09-06
    • 1970-01-01
    • 2011-11-26
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多