CSS 按钮内任意宽度的右对齐图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14238863/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Right-aligned icon within button at any width
提问by CherryFlavourPez
This should be simple, but I'm having problems getting a robust solution. Basically I'm trying to achieve this:
这应该很简单，但是我在获得强大的解决方案时遇到了问题。基本上我正在努力实现这一目标：
So, an element (aor button) with an icon right-aligned, using an icon font. I need to ensure that:
因此，具有图标右对齐的元素 (a或button) 使用图标字体。我需要确保：
- The button can be any width
- Without an icon present, there is no excess padding on the button
- The text and icon always remain on the same line (don't wrap)
- 按钮可以是任意宽度
- 如果没有图标，按钮上没有多余的填充
- 文本和图标始终保持在同一行（不要换行）
Here's the HTML:
这是 HTML：
<button class="btn">Download <span data-icon="+"></span></button>
And the (S)CSS:
和（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); }
}
}
You can see this in a jsFiddle. The problem is, unless I add a width to the .btnclass, the icon always drops a line. Absolute positioning would work, but then I'd fail to meet (2) above as it would require some padding. What am I missing?
您可以在jsFiddle 中看到这一点。问题是，除非我向.btn类添加宽度，否则图标总是会掉一行。绝对定位会起作用，但是我无法满足上面的（2），因为它需要一些填充。我错过了什么？
EDIT
编辑
I missed one other criteria:
我错过了另一个标准：
4.) At 100% width, the icon is aligned to the right (not next to the text)
4.) 在 100% 宽度时，图标向右对齐（不在文本旁边）
So in some cases, it'll look like:
所以在某些情况下，它看起来像：
Which is why the floatis necessary in my CSS.
这就是为什么float在我的 CSS 中是必要的。
SOLUTION
解决方案
Based almost entirely on @Riskbreaker's solution, here'swhat I settled on:
几乎完全基于@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;
}
}
Basically, abandoning the separate spanand using just the buttonelement, which has the benefit of less extraneous markup.
基本上，放弃单独span的button元素而只使用元素，这样可以减少无关标记。
采纳答案by Riskbreaker
Just take float:right outof [data-icon]
只要采取浮动：右出的[data-icon]
If you need to be specific with width (Pixels or Percentages),... then yes you do need float: rightso you then need an inner div to control both:
如果您需要指定宽度（像素或百分比），...那么是的，您确实需要float: right所以您需要一个内部 div 来控制两者：
<div>Create Advert HELLO YOU ALL <span aria-hidden="true" data-icon="+"></span></div>
As you can see I added width: 300px, and width: 100% works but this is more manual....this is construsively more manual(meaning being specific with your button)...but it works.
如您所见，我添加了 width: 300px 和 width: 100% 有效，但这更手动......
So either no width/no float:rightneeded or add width/float:rightneeded.
因此，要么不需要宽度/不需要浮动：正确，要么需要添加宽度/浮动：正确。
================================================================================ OK so your dilemma is you do not want to deal with dimensions, I made this not using your method but mines using no spans at all...this is my last suggestion:
================================================== ============================ 好的，所以你的困境是你不想处理尺寸，我没有使用你的方法，但根本不使用跨度...这是我的最后建议：
http://jsfiddle.net/Riskbreaker/st3m2/1/
http://jsfiddle.net/Riskbreaker/st3m2/1/
What you see here is the :before or :after(doesn't matter which just as long as you have the right padding and float method) method is the best way to get this resolve and my class added the content: plus. Removing "add" class will make the button look right and adding 100% will always have the icon right :)
你在这里看到的是:before 或 :after（只要你有正确的填充和浮动方法，这并不重要）方法是解决这个问题的最好方法，我的班级添加了内容：加。删除“添加”类将使按钮看起来正确，添加 100% 将始终具有正确的图标 :)
