html - 如何调整 anchor 标签内的图像,使其不会超出 anchor 标签的内容区域

标签 html css

我在 anchor 标签内拍摄了一个图像标签,在 anchor 标签旁边拍摄了一个按钮。我想使用图片标签显示图片,但我遇到了图片放置的问题。它向上移动并且没有显示在按钮的同一行中。请帮助我处理 CSS。

#divSelect a {
  margin-left: 5px;
  margin-top: 5px;
  display: inline-block;
}
.pic {
  height: 30px;
  width: 30px;
}
<div id="divSelect">
        @Html.DropDownList("ddl1", new SelectList(string.Empty, "Value", "Text"), "Select")
        @Html.DropDownList("ddl2", new SelectList(string.Empty, "Value", "Text"), "Select")
        <input type="submit" value="Submit" onclick="return Submit()" /> <a href="@Url.Action("TEST", "Home")"><img class="pic" src="@Url.Content("/Images/pic.png")" width=30 height=30 /></a>
    </div>

最佳答案

要在同一行中显示,请将 buttonanchor 包装在 div 中。希望这对您有所帮助。

#divSelect a {
  margin-left: 5px;      
  display: inline-block;
  vertical-align: middle;
}
.pic {
  height: 30px;
  width: 30px;
}
.select-inner{
  display:block;
  margin-top: 5px;
}
<div id="divSelect">
    @Html.DropDownList("ddl1", new SelectList(string.Empty, "Value", "Text"), "Select")
    @Html.DropDownList("ddl2", new SelectList(string.Empty, "Value", "Text"), "Select")
    <div class="select-inner">
       <input type="submit" value="Submit" onclick="return Submit()" /> 
       <a href="@Url.Action("TEST", "Home")"><img class="pic" src="@Url.Content("/Images/pic.png")" width=30 height=30 /></a>
    </div>
</div>

Check this image

关于html - 如何调整 anchor 标签内的图像,使其不会超出 anchor 标签的内容区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45741312/

相关文章:

javascript - 如何使以下绝对定位的模态始终出现在中心(无论用户滚动到哪里)?

html - 水平滚动以显示元素溢出视口(viewport)宽度时未定义的背景

html - CSS nth-child : How will nth-child will work even inside a container

javascript - 如何在 click 方法中使用 jquery 访问下一个父元素?

html - Scss - 元素深度递归样式

html - div的水平滚动条影响垂直对齐

javascript - js动态添加字段到表中

html - 当两个 div 使用自动边距居中时,如何将一个 div 放在另一个之上?

CSS 转换不适用于内联元素

javascript - 我想在链接之间隐藏一个字符