将插入符号与Bootstrap中的虚线底部边框对齐

Question

我想将一个插入符号与虚线底部边框对齐。

我设法使用this code来实现它，但它仅适用于Chromium。

HTML：

<h2 id="a11y-291">
  More <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle h2Title" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="dashedUnderline">albums</span>
      <span class="caret"></span>
    </button>
  <ul class="dropdown-menu">
    <li>
      <a href="#" role="button">artists</a>
    </li>
    <li class="active">
      <a href="#" role="button">albums</a>
    </li>
   </ul>
  </div>
</h2>

和css：

.noMarginTop {
    margin-top: 0;
}

.h2Title {
    border: none;
    font-size: 30px;
    padding: 0;
    line-height: 1em;
}

.h2Title:active,
.h2Title:hover,
.h2Title:focus {
    background-color: transparent;
}

.caret {
    display: inline-block;
    margin-top: 1em;  // Not aligned in FF
}

.h2Title .caret {
    margin-left: 3px;
}

.dashedUnderline {
    border-bottom: 1px dotted black;
}

.dropdown-menu {
    left: 0;
    right: 0;
    min-width: 0;
}

它在Chromium中按预期工作：

但Firefox有一点点偏移：

有没有人有更可靠的方法来实现这一目标？我无法弄清楚Firefox和Chromium之间的差异导致了偏移。

由于

Answer 1

.noMarginTop {
    margin-top: 0;
}

.h2Title {
    border: none;
    font-size: 30px;
    padding: 0;
    line-height: 1em;
}
.h2Title:active,
.h2Title:hover,
.h2Title:focus {
    background-color: transparent;
}
.h2Title .caret {
    margin-left: 3px;
}
/* you must add display:inline-block to.dashedUnderline and .caret */
.dashedUnderline, .caret {
    display:inline-block;
    float:left;
}
.caret {
    margin-top: 29px; 
}
.dashedUnderline {
    border-bottom: 1px dotted black;
}
.dropdown-menu {
    left: 0;
    right: 0;
    min-width: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0="
			  crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="btn-group">
       <h2 id="a11y-291">
  More 
    <button type="button" class="btn btn-default dropdown-toggle h2Title" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="dashedUnderline">albums</span>
      <span class="caret"></span>
    </button>
  <ul class="dropdown-menu">
    <li>
      <a href="#" role="button">artists</a>
    </li>
    <li class="active">
      <a href="#" role="button">albums</a>
    </li>
   </ul>
    </h2>
  </div>