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

Question

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

因此,使用图标字体将图标右对齐的元素(a或button).我需要确保:

1. 按钮可以是任何宽度
2. 如果没有图标,按钮上没有多余的填充
3. 文本和图标始终保持在同一行(不要换行)

这是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); }
    }
}

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

编辑

我错过了另一个标准:

4.)在100%宽度处,图标向右对齐(不在文本旁边)

所以在某些情况下,它看起来像:

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

解

几乎完全基于@ Riskbreaker的解决方案,这就是我所确定的:

<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>

浮动演示:对

正如你所看到的,我添加了宽度:300px,宽度:100%可以工作,但这更加手动....这是一个更具手动性(意味着特定于你的按钮)...但它的工作原理.

所以要么没有宽度/没有浮动:正确需要或添加宽度/浮动:正确需要.

================================================== ==============================好的,所以你的困境是你不想处理尺寸,我这样做不使用你的方法,但根本没有使用跨度......这是我的最后一个建议:

http://jsfiddle.net/Riskbreaker/st3m2/1/

你在这里看到的是:before或:after(只要你有正确的padding和float方法并不重要)方法是获得这个解决方案的最佳方法,我的类添加了内容:plus.删除"添加"类将使按钮看起来正确,添加100%将始终具有正确的图标:)