html - 在 html input type=button 顶部添加图标图像

Question

我需要在我的 css 按钮上添加一个 .PNG 图像，该图像将是一个汉堡菜单图标，以表明该按钮是可扩展的。

这些是我的按钮。

按钮是用这个 HTML 创建的:

                    While($row1=mysql_fetch_array($retServerNames)){

                        $serverID = $row1['id'];
                        $serverName = $row1['servername'];



                        echo"<input type='button' id='$buttonId' class='btn' name='show' value='".$serverName."' onclick='javascript:showServer(".$buttonId.");'
                            style='width: 90%; margin: 1%; text-align:left;'>";

                        echo"<div id='$serverName' style='margin: 3%; display:none;'>";

                        echo"<table style='border-bottom: 1px solid black;' cellspacing='10px'>

                                            <thead>
                                                <tr>
                                                    <th></th>
                                                    <th>Task</th>
                                                    <th>Status</th>
                                                    <th>Agent</th>
                                                    <th>Date Completed</th>
                                                    <th></th>
                                                </tr>
                                            </thead>";      

我已经尝试将图像标签和输入类型都放在一个 div 元素中，并且厌倦了将图像放置在按钮上但没有成功，有没有更好的方法来做到这一点？或者有人可以建议一个替代元素，让我比按钮元素更容易做到这一点吗？先感谢您。

Answer 1

最简单的方法是使用实​​际的按钮元素。

<button type="button"
        id="<?php echo htmlspecialchars($buttonId); ?>"
        onclick="showServer(this.id);">
    <img src="hambuger.png" alt="">
    <?php echo htmlspecialchars($serverName); ?>
</button>