正文 

当前位置： 首页 > 问答 >

在图片下方放置链接

     2023-03-05     64

关键词：

【中文标题】在图片下方放置链接【英文标题】：Putting a link below an image 【发布时间】：2021-12-05 16:08:27 【问题描述】：

我正在尝试在图片下方放置一个链接，无论出于何种原因，该链接一直在图片的一侧（右侧）。图片显示正常，链接有效，但我只需要图片下方的链接。

有什么想法吗？

HTML：

<div class="images">
  <img src="imgs/2.jpeg"    />
  <a class="link1" href="https://www.google.com">Test</a>
</div>

CSS：

.images 
  position: absolute;
  left:10px;
  top: 200px;
  font-size: 120%;

我是 HTML/CSS 的新手，所以如果有人能用简单的术语解释一下，我将不胜感激。我尝试了很多不同的方法，例如跨度、对齐等，但都行不通！

如果我使用 p 语句而不是 ULR (h ref) 文本确实会在图像下方，所以我很困惑！

【问题讨论】：

&lt;img&gt; 和&lt;a&gt; 元素是display:inline 类型，通常用于文本。这是此显示类型的正常行为。您只需将两者的显示类型更改为display:block 或混合：display:inline-block 【参考方案1】：

默认情况下，图像是内联元素 8，虽然被视为 inline-block)。您需要做的就是将图像设置为块级元素：img display: block; 

img 
  display: block;

<div class="images">
  <img src="https://via.placeholder.com/100.jpg"    />
  <a class="link1" href="https://www.google.com">Test </a>
</div>

【讨论】：

【参考方案2】：

您可以使用 display flex 使其成为一列。 解释：https://www.w3schools.com/css/css3_flexbox_container.asp

.images 
  position: absolute;
  left: 10px;
  top: 200px;
  font-size: 120%;
  display: flex;
  flex-direction: column;

<div class="images">
  <img src="imgs/2.jpeg"    />
  <a class="link1" href="https://www.google.com">Test </a>
</div>

【讨论】：

不需要使用flexbox...img display: block; 就足够了。【参考方案3】：

您可以在图片标签下方添加换行标签。

<div class = "images">
<img src="imgs/2.jpeg"    />
<br>
<a class="link1" href = "https://www.google.com" >Test </a>
</div>

【讨论】：

错误使用br @tacoshy 但它仍然可以正常工作 如果我可以问， 标签的正确用法是什么？ 好吧，它的使用并非完全错误。然而，设置为块级元素的图像具有一定的优势。因此，没有必要使用 br 来破坏块级元素。特别是如果您可以使用 CSS 解决样式问题，那么应该首选使用 html 标记 好的，谢谢大佬

如何在 Textview 下方放置一个按钮

】如何在Textview下方放置一个按钮【英文标题】：HowtoplaceabuttonExactbelowtheTextview【发布时间】：2014-03-0306:55:18【问题描述】：我有两个标签和一个文本视图，用于显示来自json的解析数据。在这里，我根据文本增加标签和文本视图... 查看详情

如何将 UILabel 放置在 UIImageView 下方，使其始终均匀放置

】如何将UILabel放置在UIImageView下方，使其始终均匀放置【英文标题】：HowcanIplaceaUILabelbelowanUIImageViewsuchthatitisalwaysevenlyplaced【发布时间】：2016-08-2907:00:25【问题描述】：我制作了一个看起来像这样的自定义弹出视图我想将用户名... 查看详情

在导航栏下方放置圆形按钮

】在导航栏下方放置圆形按钮【英文标题】：Puttingroundedbuttonsunderneaththenavbar【发布时间】：2021-12-2010:55:46【问题描述】：我的母版页上有一个导航栏。下面是代码：<navclass="navbar"style="background-color:#264653;position:absolute;top:0px;left... 查看详情

如何在列表视图下方放置固定按钮？

】如何在列表视图下方放置固定按钮？【英文标题】：Howtoplacefixedbuttonbelowlistview?【发布时间】：2012-09-0702:27:30【问题描述】：有没有办法让一个按钮直接位于列表视图下方，这样随着列表视图的增长，按钮会向下移动，但按钮... 查看详情

在 UITableView 下方放置 iAd 横幅

】在UITableView下方放置iAd横幅【英文标题】：PlacinganiAdbannerbelowaUITableView【发布时间】：2012-01-0400:05:24【问题描述】：我一直在尝试使用iAdSuiteAdBannerNavigation示例代码作为起点，让iAd横幅显示在屏幕底部。iAd套件让您创建横幅视图... 查看详情

将 div 放置在广告上方而不是下方

】将div放置在广告上方而不是下方【英文标题】：Placingadivoveradvertisinginsteadofbelow【发布时间】：2013-12-2316:08:14【问题描述】：我有这个代码：<divclass="c1">//codethatmakesadivmovedownwards</div><divclass="banner"><scriptasyncsrc="//p... 查看详情

CSS 菜单布局。如何在图标下方放置文字？

】CSS菜单布局。如何在图标下方放置文字？【英文标题】：CSSMenulayout.HowtoplacetextbelowIcon?【发布时间】：2020-05-1317:15:40【问题描述】：我在下面有一个沙箱。我已将侧边栏的宽度设置为固定。我正在尝试使菜单文本位于图标下方... 查看详情

是否可以在没有 UINavigationController 的情况下将 UIToolbar 放置在 UICollectionView 下方？

...有UINavigationController的情况下将UIToolbar放置在UICollectionView下方？【英文标题】：IsitpossibletoplaceaUIToolbarbelowaUICollectionViewwithoutaUINavigationController?【发布时间】：2017-12-2922:48:24【问题描述】：我有一个包含UICollectionView和UIToolbar的 查看详情

如何在可滚动活动中的 ListView 下方放置一个按钮？

】如何在可滚动活动中的ListView下方放置一个按钮？【英文标题】：HowtoPlaceaButtonbelowaListViewinaScrollableActivity?【发布时间】：2020-01-2520:38:04【问题描述】：<?xmlversion="1.0"encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.android.... 查看详情

如何在背景图像下放置边框？

...发布时间】：2021-07-0318:57:12【问题描述】：我有一个背景图片和一个边框，所以我需要将该边框放在我的背景图片下方，就像它在草稿中显示的那样。Draftimage现在我有这样的东西。Myresult我该如何解决？CSS.hero-image位置：相对;宽... 查看详情

Flutter：如何将小部件放置在容器内的固定居中小部件下方

】Flutter：如何将小部件放置在容器内的固定居中小部件下方【英文标题】：Flutter:HowtoplaceaWidgetbelowfixedCenteredWidgetinsideaContainer【发布时间】：2021-03-2608:27:29【问题描述】：如何将Widget放置在Container内固定的CenteredWidget下方？我正... 查看详情

在 android 上的播放器功能区下方放置横幅广告

】在android上的播放器功能区下方放置横幅广告【英文标题】：Placebanneradbelowplayerribbononandroid【发布时间】：2021-12-1119:31:21【问题描述】：我想将横幅广告放在媒体播放器功能区下方。目前它与媒体播放器功能区重叠。我尝试了... 查看详情

怎么用js或jq写一个鼠标点击超链接在下方显示图片而且还有图片描述

参考技术A<a href="javascript:imgshow();">显示图片和描述</a><p id="tmms" style="display:none;"><img name="tm" src="#" width="32" height="32" alt=""&n... 查看详情

如何在 UIScrollView 的滚动指示器下方放置非滚动 UIView？

】如何在UIScrollView的滚动指示器下方放置非滚动UIView？【英文标题】：HowcanIplaceanon-scrollingUIViewunderneaththescrollindicatorsonaUIScrollView?【发布时间】：2012-04-0310:44:30【问题描述】：我有一个应用程序，我使用缩放滚动视图将图像裁剪... 查看详情

NSLayoutContraints：如何将底部视图放置在两个标签中较高者的下方？

...ayoutContraints：如何将底部视图放置在两个标签中较高者的下方？【英文标题】：NSLayoutContraints:Howtopositionabottomviewbelowthehigheroftwolabels?【发布时间】：2019-08-2010:21:38【问题描述】：我正在开发一个iOS11+应用程序，并希望创建如下图... 查看详情

图片顶部的文本框

】图片顶部的文本框【英文标题】：Textboxontopofpicture【发布时间】：2015-07-3015:12:57【问题描述】：在ReportingServices中，我试图在图片上放置一个表格。在报表生成器中它可以工作，但无论何时运行报表，表格都会移动到图片下方... 查看详情

使用 HTML5 Drag'n'Drop 进行列表排序 - 根据鼠标放置在上方或下方

...用HTML5Drag\\\'n\\\'Drop进行列表排序-根据鼠标放置在上方或下方【英文标题】：ListSortingwithHTML5Drag\'n\'Drop-DropAboveorBelowDependingonMouse使用HTML5Drag\'n\'Drop进行列表排序-根据鼠标放置在上方或下方【发布时间】：2017-11-0823:01:11【问题描述... 查看详情

如何在彼此下方对齐多个元素？

...如果问题的选择多于一行，这种布局将它们挤压到行中，图片和问题“ 查看详情