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

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>