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

Question

I'd like to align a caret with a dotted bottom border.

I managed to achieve it using this code but it works only in 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>

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

It works as expected in Chromium:

But there is a slight offset in Firefox:

Has anyone a more reliable way to achieve this? I cannot figure out what differs between Firefox and Chromium resulting in an offset.

Thanks

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>