css样式问题

Question

如图，左边红框是个a标签，点击会有dropdown效果，右边是个小icon，点击也有其效果。问题是：因为我浏览器宽度在不断变小的情况下，左边原本一行的内容换行成2行，这也就导致原本紧贴文本后的icon，现在跟文本有了间隙，这个该怎么解决？有什么好的方案么？

---

追加声明：左边红框是个a标签，有点击效果，右边icon也是有自己的点击效果，如果放在一起会有bug

Answer 1

你要想换行的时候也保持icon紧随文字的话你可以试试将icon跟文字写在一个标签里面，例如

<div>你的文字<i class="icon"></i></div>

然后在你的css里面加上这么几句

div > i {
  display:inline-block;
  vertical-align:top;
}

这样写完之后icon跟文字如果没有在同一高度可以使用margin调整一下就OK了

Answer 2

最好的办法就是浮动，不用浮动其他方法也有。。。

Answer 3

有很多方法可以，绝对定位啊，或者给这个a标签加上
background: url(***) right top no-repeat;
然后padding-right

Answer 4

定位 在文字层给个icon宽度的padding icon定位上去 就不会有间隙了

Answer 5

用行内元素吧
类似

<div>
    <a>xxxx</a><span icon></span>
<div>

Answer 6

推荐使用图标库，Font Awesome或是别的，直接写到文本里，不存在这样的问题