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

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

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

编辑

我错过了另一个标准:

4.) 在 100% 宽度时，图标右对齐(不在文本旁边)

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

这就是为什么 float 在我的 CSS 中是必需的。

解决方案

几乎完全基于@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] 中取出 float:right

DEMO

如果您需要特定宽度(像素或百分比)，...那么是的，您确实需要 float: right 因此您需要一个内部 div 来控制两者:

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

Demo with float:right

如您所见，我添加了 width: 300px 和 width: 100% 可以工作，但这更需要手动....这在解释上更需要手动(意味着要针对您的按钮进行具体说明)...但它可以工作。

因此，要么不需要宽度/没有 float :正确，要么需要添加宽度/ float :正确。

============================================= ================================= 好的，所以你的困境是你不想处理维度，我做这个不是使用你的方法，而是我的完全不使用跨度...这是我最后的建议:

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

你在这里看到的是 :before 或 :after(只要你有正确的 padding 和 float 方法就没关系)方法是获得此解决方案的最佳方法，我的类(class)添加了内容:加号。删除“添加”类将使按钮看起来正确，添加 100% 将始终具有正确的图标:)