Question

我正在使用来自icomoon的图标。我想向用户提供一个下拉菜单。它有效但问题是箭头按钮正在关闭。是否可以将箭头按钮保持在顶部（我的意思是靠近图标的头部。）请看截图

enter image description here

这是我的导航栏代码

<nav class="navbar navbar-custom navbar-static-top">
<div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#"></a>
  </div>
  <div class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#"></a></li>
      <li><a href="#">D</a></li>
      <li><a href="#">E</a></li>
    </ul>

    <ul class="nav navbar-nav navbar-right">
      <li><a href="#" class="icon-store"></a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle icon-user2" data-toggle="dropdown" > <b class="caret"></b></a>
        <ul class="dropdown-menu pull-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
    </ul>
  </div><!-- /.navbar-collapse -->
  </div>
</nav>

这是图像图标的style.css

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?-8mvsu3');
    src:url('fonts/icomoon.eot?#iefix-8mvsu3') format('embedded-opentype'),
        url('fonts/icomoon.woff?-8mvsu3') format('woff'),
        url('fonts/icomoon.ttf?-8mvsu3') format('truetype'),
        url('fonts/icomoon.svg?-8mvsu3#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-search:before {
    content: "\e600";
}
.icon-users:before {
    content: "\e601";
}
.icon-lock:before {
    content: "\e602";
}
.icon-cogs:before {
    content: "\e603";
}
.icon-bubbles:before {
    content: "\e604";
}
.icon-pawn:before {
    content: "\e605";
}
.icon-box-add:before {
    content: "\e606";
}
.icon-signup:before {
    content: "\e607";
}
.icon-equalizer:before {
    content: "\e608";
}
.icon-bars:before {
    content: "\e609";
}
.icon-disk:before {
    content: "\e60a";
}
.icon-user:before {
    content: "\e60b";
}
.icon-user2:before {
    content: "\e60c";
}
.icon-stackoverflow:before {
    content: "\e60e";
}
.icon-store:before {
    content: "\e60f";
}
.icon-trash:before {
    content: "\e60d";
}

Answer 1

您可以在所有主流浏览器中使用 vertical-align 属性。

http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

Answer 2

要使箭头与顶部对齐，请使用.caret { vertical-align: top; }或使用其他值来查看是否可以获得所需效果。您可以在此处列出可能的值：W3C Wiki

尝试使用这些：

vertical-align：text-top
vertical-align：text-bottom
vertical-align：middle
vertical-align：top

如果要更改.caret大小，则必须更改声明的三个边框大小。因为它不是图标，所以是用CSS（CSS3 Shapes）制作的三角形：

border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid;

将4px更改为您想要的任何内容。

如何将下拉箭头移动到顶部？

2 个答案: