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>

FluentFunctions

Answer 1

如果没有按钮的CSS，这将是一个猜测。它看起来像你的按钮太大了线。线条的高度由非内联和非浮动元素（两者都是锚点）设置。为了纠正这个问题，要么增加h2字体大小，增加h2的行高，要么调整锚的样式，使其不浮动或内联。

你可以用一些相对位置（负顶部）来做，但是你必须修补一下并决定你最喜欢哪个。

Answer 2

正如@skobaljic所建议的那样，您可以使用DUAL定位...但是q元素必须设置为WITH q AS ( SELECT COUNT(id) AS cnt -- name this column FROM test ) SELECT 1, CASE WHEN cnt = 0 -- use the column you named previously THEN 'toto' ELSE 'titi' END FROM q; -- use the named subquery q not the dual table定位。使用此方法，无需使用absolute。

<h2>

然后调整您的HTML - 请注意relative已从锚标记中删除。

float

更多CSS对齐问题

2 个答案: