html按钮右对齐的代码,css – 按钮内任意宽度的右对齐图标

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

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

>按钮可以是任何宽度

>如果没有图标,按钮上没有多余的填充

>文本和图标始终保持在同一行(不要换行)

Download

和(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％宽度处,图标向右对齐(不在文本旁边)

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

这就是为什么浮点数在我的CSS中是必要的.

解

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

Click Me :P

.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元素,这样可以减少额外的标记.