7

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

按钮示例

因此,一个带有图标右对齐的元素(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% 宽度时,图标向右对齐(不在文本旁边)

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

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元素,这具有减少无关标记的好处。

4

1 回答 1

7

只需float:right 就可以[data-icon]

演示

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

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

带有浮动的演示:对

如您所见,我添加了 width: 300px 和 width: 100% 的作品,但这是更手动的......这明显更手动(意味着特定于你的按钮)......但它有效。

所以要么没有宽度/没有浮动:需要右或添加宽度/浮动:需要。

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

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

您在这里看到的是:before 或 :after只要您有正确的填充和浮动方法就可以了)方法是获得此解决方案的最佳方法,我的课程添加了内容:加号。删除“添加”类将使按钮看起来正确,添加 100% 将始终具有正确的图标 :)

于 2013-01-09T15:57:24.510 回答