Question

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

Answer 1

我会使用slide: function (e, ui) { // Prevent crossing and overlapping of slider handles. if (ui.values[(ui.handleIndex - 1)] >= ui.value || ui.values[(ui.handleIndex + 1)] <= ui.value) { return false; } }

＆＃13;

background-image

＆＃13;

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;
}

＆＃13;

Answer 2

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

您可以在此处详细了解居中元素：https://css-tricks.com/centering-css-complete-guide/

Answer 3

这是你想要的布局吗？

它使用图标而不是图片，但您只需将i标记替换为img标记，然后调整css。

＆＃13;

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 {

}

＆＃13;

<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>

＆＃13;

<强>小提琴

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

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

3 个答案: