html - 更多 CSS 对齐问题

Question

我正在尝试对齐 <H2>在同一行上有一个按钮。 <H2>有一条底部边框线，我希望按钮正好位于该线的上方。

我试过添加底部边距和/或填充，但这会向下移动。

我附上了呈现的 HTML 和 Chrome 中一些检查的屏幕截图。如果有任何其他信息可能有帮助，请告诉我。

.button-xs-med {
  display:inline-block;
  width:95px;
  height:25px;
  cursor:pointer;
  font-size:13px;
  line-height:1;
  color:#fff;
  text-align:center;
  background:url('/content/images/workflow-wizard-button-xs-med.png') no-repeat;
}

.button-xs-med .button-text {
  display:inline-block;
  width:95px;
  height:12px;
  margin:4px 5px 0px 0px;
  font-family:'Open Sans Condensed',sans-serif;
  color:#fff;
}

<div id="pnlResourceSnapshotList" data-source-href="http://localhost:63595/profiles/yada/652">
  <div>
    <h2 style="margin: 0 15px; border-bottom: 1px solid #dadada;">
      Current Resources
      <a onclick="AjaxAction('/home/setcollapse', 'POST');" class="button-xs-med" role="button" data-toggle="collapse" href=".collapse" aria-expanded="false" aria-controls="contentDetails" style="float: right;">
        <span class="button-text">
          Details
        </span>
      </a>
    </h2>
  </div>
  <div style="margin: 0 15px;">
    <div style="display: inline-block; width: 100%; padding:5px 0px;border-bottom:1px solid #dadada;">
      <div style="padding: 0;">
        Text
      </div>
    </div>
  </div>
  <div style="margin: 0 15px; ">
    <div style="display: inline-block; width: 100%; padding:5px 0px;border-bottom:1px solid #dadada;">
      <div style="padding: 0;">
        Text
      </div>
    </div>
  </div>
</div>

Answer 1

如果您的按钮没有 css，这将是一个猜测。在我看来，您的按钮对于线路来说太大了。线的高度由非内联和非 float 元素(您的 anchor 都是)设置。为了纠正这个问题，要么增加 h2 的字体大小，增加 h2 的行高，要么调整 anchor 的样式，使其不 float 或内联。

你也可以用一些相对位置(负顶部)来做，但你必须稍微修改一下，然后决定你最喜欢哪个。