Question

我有一个带有Fontawesome图标的按钮，作为子弹我希望始终位于按钮文本的右侧。 See Fiddle

假设我总是希望该图标与按钮左边缘的固定距离为6px。

我无法想象如何做到这一点，所以现在我使用right:150px作为定位值，但这只适合某个按钮的尺寸，根据它内部的文字。一旦我将文本更改为更长/更短，图标也会移动。

如何修复它？（我不记得我当前的代码是否在IE7 / 8上运行良好，但如果确实如此，我希望该解决方案也适用于这些版本。）

HTML：

<form>
<div class="button-area">
  <label>
    <span class="fa fa-eye fa-lg bullet"></span>
    <input type="submit" class="button" value="Changing Text">
  </label>
</div>
</form>

CSS：

.button-area{float:left;margin-left:5px;position:relative;padding-bottom:8px}

.button{display:inline-block;zoom:1;line-height:normal;white-space:nowrap;vertical-align:baseline;text-align:center;cursor:pointer;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:inherit;font-family:'Open Sans',arial;font-size:17px;padding:.6em .8em .5em 1.8em;text-decoration:none;border-radius:4px}
.button{color:#fff;background-color:green}

label{display:inline-block;cursor:pointer}

.bullet{position:absolute;height:11px;top:15px;right:150px;width:3px;color:white;font-size:1em !important;text-shadow:0 1px 1px rgba(0,0,0,.2)}

Answer 1

如果我正确地阅读了您的问题，您希望.bullet范围从左侧开始是6px，但是您使用right:150px;来放置它吗？为什么不使用left:6px;，这就是它的用途 JSFIddle

Answer 2

够容易。当您使用基于字体的图标时，您只需要将图像视为字体中的单个字母。

这意味着。不要给它任何宽度。如果你想更大，请使用font-size然后。如果你想让你的单个“字母”的位置绝对，那很好（虽然我更喜欢其他方式）。只需从您的CSS中删除“宽度”，然后添加left:6px权利。

对于你的下一个小提琴我建议你让它有点清除（线的属性），因为现在很容易看到它。

我只是改变了这个css：

.bullet{position:absolute;height:11px;top:15px;left:6px;color:white;font-size:1em !important;text-shadow:0 1px 1px rgba(0,0,0,.2)}

已编辑：我正在添加我的一条评论，因为我认为这可能与更好地利用html / css（imho）相关

但是你真的希望它能够做到这一点输入..如果你不能使用简单的链接（标签），那么使用按钮标签 insteed。因为你可以这样做： https://jsfiddle.net/gw6ce83o/5/，您的用户现在可以随处点击在你的按钮（只输入输入）和非常高 posibilitie你的提交将与它相同（编程）你的输入atm

已更新 FIDDLE

将固定位置分配给按钮内的图标？

2 个答案: