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答案更清晰。

如何在按钮内定位图像？

2 个答案: