如何調整錨標記內的圖像，使其不會從錨標記的內容區域出來

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>