如何调整锚标记内的图像，使其不会出现锚标记的内容区域

Question

我在锚标记内部采用了图像标记，在锚标记旁边采用了一个按钮。我想使用图片标签显示图片，但我对图像的放置有疑问。它向上移动而不是显示在按钮的同一行。请帮我搞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>

Answer 1

要在同一行显示，请将button和anchor包裹在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>