html - 通过CSS在按钮中的一行中的图像和文本没有浮点

我试图在一个按钮中以相同的线条效果实现图像和文本。对于div和p之类的其他标签，显示：内联效果很好，但似乎不适用于按钮标签。这是小提琴：

https://jsfiddle.net/xfgjoo23/

代码：

<button>
    <span class="astext">
        Next
    </span><img src="image/delete1.png" class="del" style="width:10px;height:10px"  />
</button>

而我的CSS：

 img.del {
    display: inline-block;
    cursor: pointer;
    margin-right: 74%;
    position: relative;
    }
.astext {
    display: inline-block;
    text-align: left;
    margin-left: 10%;
}
button {
    width: 80px;
}

请注意：我确实想使用按钮标签，并且我知道float：正确就可以了，但这是最后一个选择，因为它看上去很奇怪……

最佳答案

margin-right: 74%;中的img.del将生效。因为太高了。它将中断线。将其更改为margin-left: 10px; margin-right: 5%;

img.del {
    display: inline-block;
    cursor: pointer;
    margin-left: 10px;
    margin-right: 5%;
    position: relative;
    }

会使它看起来很好。

Working Fiddle