css样式问题

问题描述

问 题

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

---

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

解决方案

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

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

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

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

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

这篇关于css样式问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！