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

Question

>我正在尝试在按钮中实现图像和文本的相同线条效果。对于其他标签，如div 和 p，display： inline 工作得很好，但它似乎不适用于按钮标签。这是小提琴：

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：right 会起作用，但这是最后一个选项，因为它看起来很奇怪......

Answer 1

img.del的margin-right: 74%;都会影响它。因为它太高了。它会打破界限。 将其更改为margin-left: 10px; margin-right: 5%;

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

会让它看起来很好。

工作小提琴

Answer 2

margin-right: 74%;和img代码位置使这成为现实。

刚刚将img标记移动到 span 之前并删除margin-right:74%;

小提琴 ： https://jsfiddle.net/xfgjoo23/2/

Answer 3

删除<span>标签，margin-right: 74%会使它们在同一行中。

如果您在文本和图像之间添加两个&nbsp将使它看起来更好：

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

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

Answer 4

https://jsfiddle.net/xfgjoo23/3/

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

css

span img{height:100%;}

我认为这是做到这一点的完美方式

Answer 5

<button >
    <img src="image/delete1.png" class="del" style="width:10px;height:10px"  />
    <span class="astext">
        Next
    </span>
</button>
 img.del {
    display: inline-block;
    cursor: pointer;
    position: relative;
    vertical-align: text-top;
    }
.astext {
    display: inline-block;
    text-align: left;
    margin-left: 10%;
    vertical-align: top;
}
button {
    width: 80px;
    padding: 10px;
}