html - 如何在按钮内定位图像？

Question

我有这个按钮，我想在左边有一个图像，它应该有一个文本

我可以在按钮内随意放置。我尝试了几种方法，但我无法定位

我想要的文字和图像。

 <button class ="buttn"> Click Here <img src ="./logo.png"> </button>

Answer 1

.buttn{
    background:transparent url(/logo.png) no-repeat left;
    border:0;
    padding-left: xxxpx; // this is how wide the image is plus any additional padding
}

<button class="buttn">Click Here</button>

该路径应替换为正确的路径。基本上，将图像设置为背景，删除任何默认按钮样式，然后使用填充，直到您按预期定位文本。

倍数：

.buttn{
    background-image:url(/logo.png), url(/gradient.png);
    background-repeat:no-repeat, repeat-x;
    background-position:center left, center left;
}

顺便说一句，您不需要使用图像作为渐变。只是表明您可以拥有多个背景。

Answer 2

我从来没有在按钮中放置图像。我猜它没有显示出来。在这种情况下，将按钮包装在一个 div 中，向左浮动（或与按钮相同的 demensons）和相对位置。使用绝对定位将图像定位在您想要的位置。使用按钮中的填充来按您想要的方式推送文本。如果填充不起作用，则将文本包装在 span 中并将其 AP 到。

如果它适用于所有浏览器，Kai 的答案会更干净。