Question

我正在使用bootstrap 3导航栏。但是在我的一个下拉菜单中，我添加了<span class="label label-success"></span>

我似乎无法将span内联到其所连接的链接。不知道该怎么做。

在此演示：点击通知链接下拉菜单。 http://codepen.io/riwakawebsitedesigns/pen/asqoy

.dropdown-menu {
  min-width: 280px;
}

ul.nav .navbar {
  margin: 0;
  padding: 0;
}

.dropdown-menu li {
  margin: 0;
  padding: 0;
  vertical-align: top;
}

.dropdown-menu li a {
  margin: 0;
  overflow: auto;
}

.dropdown-menu li a:hover {
  background: #222222;
  color: #FFFFFF;
}

.dropdown-menu li a span {
  float: right;
  display: block;
}

Answer 1

演示 - http://codepen.io/anon/pen/hKJHp

.dropdown-menu li a span {
    float: right;
    line-height: inherit; /** set the line-height to inherit */
}

Answer 2

在获得其他建议之后。它现在可以使用这个css

ul.dropdown-menu > li > a {
    display: block;
    overflow: auto;
    position: relative;
}   

ul.dropdown-menu span.label {
    position: absolute;
    top:50%;
    right:0;
    transform:translate(-50%,-50%);
}

菜单链接对齐不起作用

2 个答案: