这应该很简单,但我在获得强大的解决方案时遇到了问题。基本上我正在努力实现这一目标:
因此,一个带有图标右对齐的元素(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); }
}
}
您可以在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
元素,这具有减少无关标记的好处。