html - 如何在html按钮中对齐文本两侧的图标

Question

伙计们，我在文本的 2 侧使用带有图标的按钮，当文本较小时它可以工作，但有时我的文本较长，不得不将它们分成 2 行。怎么做 ？

<button type="submit"  class="button-orange width-280" > <img src="img/icon-getDetails.png"> Get More Details <img class="button-icon" src="img/icon-external-link.png">   </button>
<button type="submit"  class="button-orange width-280" > <img src="img/icon-basket.png"> Add to compare basket <span class="badge white">3</span> <img class="button-icon-chevron" src="img/icon-chevron-right.png">   </button>

我附上这张图片。我需要更长的文本也像第一个按钮一样出现。

Answer 1

我没有你的 CSS，但我猜这个类在按钮上width-280添加了一个。width: 280px

不要使用固定宽度，而是使用最小宽度。更改width: 280px为min-width: 280px。

Answer 2

您可以将图标设置为按钮上的背景图像，并将按钮的侧面填充到图标的宽度。请注意此方法对 IE8 不友好。:(

例如

HTML：

<button>
  Get more details
</button>

CSS：

button {
  background:
    url('img/icon-getDetails.png') top left no-repeat,
    url('img/icon-external-link.png') top right no-repeat;

  padding: 0 30px;
}

这是一个可以帮助您想象它的小提琴。