未设置<br>标签时，下拉按钮内的Font Awesome图标为何跑到文字下方？

问题根因 #

你为.dropbtn内的上下箭头设置了display: block属性，块级元素默认会独占整行，因此会被挤到「Filters」文字的下方，该问题和按钮宽度没有关联。

解决方案 #

把所有箭头相关样式规则中的display: block替换为inline-block即可，你还可以额外添加垂直对齐、左侧边距属性让显示效果更协调，修改后的代码如下：

/* 替换原来的箭头相关样式即可 */
.dropbtn #down {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
}

.dropbtn #up {
  display: none;
  margin-left: 6px;
  vertical-align: middle;
}

.dropbtn:hover #down,
.dropbtn:active #down {
  display: none;
}

.dropbtn:hover #up,
.dropbtn:active #up {
  display: inline-block;
}

内容的提问来源于stack exchange，提问作者T3C