导航栏下拉按钮上的向下箭头答案

【问题标题】：Down arrow on drop down button on nav bar导航栏下拉按钮上的向下箭头
【发布时间】：2017-10-21 11:26:14
【问题描述】：

在我的导航栏上，我有下拉菜单，我想在此按钮中插入向下箭头，但我应该怎么做呢？我可以使用&#9660 字符，但是如果我想要不同的箭头怎么办？这是我在a https://jsfiddle.net/adriansikora344/cgfd5cxk/ 中插入img 的代码，我将position absolute 用于img，因为当我更改文本字体大小时，我的位置不变，但top: 50% - 16px 是否正确？ Meybe 我应该将此标签用于 span 吗？

【问题讨论】：

你确实在你的小提琴中插入了一个向下箭头，对吧？你到底想达到什么目的？
我如何在导航栏上插入图像和文字进行描述，类似于w3schools.com
看看这个 flexbox 答案是否有帮助 stackoverflow.com/a/39161435/3377049

标签： html css

【解决方案1】：

我会使用background-image

body {
  padding: 20px 20px;
}

a {
  position: relative;
  display: inline-block;
  background: url('https://img.clipartfest.com/c37b8d1f47f75c7cf1f8f37ede371252_red-down-arrow-clip-art-at-down-arrow-clipart_600-600.png') calc(100% - 10px) center no-repeat / 16px 16px;
  padding: 10px 30px 10px 10px;
  border: 1px solid black;
}

&lt;a&gt;text&lt;/a&gt;

【讨论】：

【解决方案2】：

或者您仍然可以使用绝对位置的 img 标签，但将顶部更改为 top: 50%; 并添加 transform: translateY(-50%); 示例：https://jsfiddle.net/cgfd5cxk/3/

您可以在此处阅读有关居中元素的更多信息：https://css-tricks.com/centering-css-complete-guide/

【讨论】：

【解决方案3】：

这是你想要的布局吗？

它使用图标而不是图像，但您可以将 i 标签替换为 img 标签并调整 css。

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}
.link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  text-decoration: none;
  color: black;
  background-color: gray;
  border-radius: 5px;
}
.link span {
  margin-right: 8px;
}
.link i {

}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a class="link" href="https://jsfiddle.net/Hastig/cgfd5cxk/5/">
  <span>text</span>
  <i class="fa fa-caret-square-o-down"></i>
</a>

小提琴

https://jsfiddle.net/Hastig/cgfd5cxk/5/

字体真棒

另外，here's the list 的当前 Font Awesome 图标，这是在您的 html 中加载字体的链接..

https//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

【讨论】：