Question

这应该很简单，但我在获得强大的解决方案时遇到了问题。基本上我正在努力实现这个目标：

button examples

因此，使用图标字体右边对齐图标的元素（a或button）。我需要确保：

按钮可以是任何宽度
如果没有图标，按钮上没有多余的填充
文本和图标始终保持在同一行（不要换行）

这是HTML：

<button class="btn">Download <span data-icon="+"></span></button>

和（S）CSS：

.btn {
    margin: 0;
    padding: 3px 6px;
    vertical-align: middle;
    border: none;
    background-color: #535B99;
    color: white;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    text-transform: uppercase;
    [data-icon] {
        float: right;
        padding-left: 10px;
        &:before { content: attr(data-icon); }
    }
}

您可以在a jsFiddle中看到这一点。问题是，除非我向.btn类添加宽度，否则图标总是会掉线。绝对定位会起作用，但是我不能满足上面的（2），因为它需要一些填充。我错过了什么？

修改

我错过了另一个标准：

4.。）在100％宽度处，图标向右（不在文本旁边）

所以在某些情况下，它看起来像：

100% width version

这就是我的CSS中float是必要的原因。

解

几乎完全基于@ Riskbreaker的解决方案，here's我所确定的：

<button data-button-icon="+" class="btn" href="#">Click Me :P</button>

.btn {
    display: inline-block;
    margin: 0 0 10px 0;
    padding: 3px 6px;
    border: medium none;
    background-color: #535B99;
    color: #FFFFFF;
    cursor: pointer;
    text-align: left;    
    text-decoration: none;
    white-space: nowrap;
    &:after {
      content: attr(data-button-icon);
      float: right;
      padding-left: 1em;
    }
}

基本上，放弃单独的span并仅使用button元素，这样可以减少额外的标记。

Answer 1

采取浮动：直接 [data-icon]

DEMO

如果你需要特定的宽度（像素或百分比），...那么是的你需要浮动：正确所以你需要一个内部div来控制两者：

<div>Create Advert HELLO YOU ALL <span aria-hidden="true" data-icon="+"></span></div>

Demo with float:right

正如你所看到的，我添加了宽度：300px，宽度：100％可以工作，但这更加手动....这是一个更具手动性（意味着特定于你的按钮）......但是它有效。

所以没有宽度/没有浮动：正确需要或添加宽度/浮动：正确需要。

=============================================== ================================= 好吧，所以你的困境是 你不想处理维度 ，我这不是使用你的方法，而是根本没有使用任何跨度...这是我的最后一个建议：

<强> http://jsfiddle.net/Riskbreaker/st3m2/1/

你在这里看到的是：before or：after （无关紧要，只要你有正确的填充和浮动方法）方法是获得此决心的最佳方式，我的课程添加了内容：加号。删除“添加”类将使按钮看起来正确，添加100％将始终使图标正确：）

按钮内任意宽度的右对齐图标

1 个答案: