Html 更多CSS对齐问题

我正在尝试将

与同一行上的按钮对齐。

有一条底边线，我希望按钮刚好在这条线的上方

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

我正在附加渲染的HTML和Chrome中一些检查的屏幕截图。如果有任何其他信息，可以帮助，请让我知道

。按钮xs med{
显示：内联块；
宽度：95px；
高度：25px；
光标：指针；
字体大小：13px；
线高：1；
颜色：#fff；
文本对齐：居中；
背景：url（'/content/images/workflow wizard button xs med.png'）不重复；
}
.button xs中间按钮文本{
显示：内联块；
宽度：95px；
高度：12px；
保证金：4px 5px 0px 0px；
字体系列：'opensans Condensed'，Sans serif；
颜色：#fff；
}

现有资源
正文
正文

如果按钮没有css，这将是一个猜测。在我看来，你的按钮太大了。线的高度由非内联元素和非浮动元素设置（这两个元素都是锚点）。为了纠正这种情况，可以增加h2字体大小，增加h2的行高，或者调整锚定的样式，使其不浮动或内联

---

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

正如@skobaljic所建议的，你可以使用

绝对

定位。。。但是，

元素必须设置为相对定位。使用此方法，无需使用

浮点

/* Adjust your css */
h2 {
    position: relative;
}

.button-xs-med {
    position: absolute;
    right: 0;
    top: 0;
}

然后调整html-请注意，

style=“float:right；”“

已从锚标记中删除

<h2 style="margin: 0px 15px; border-bottom: 1px solid rgb(218, 218, 218); position: relative;">
      Current Resources
      <a style="" aria-controls="contentDetails" aria-expanded="false" href=".collapse" data-toggle="collapse" role="button" class="button-xs-med" onclick="AjaxAction('/home/setcollapse', 'POST');">
        <span class="button-text">
          Details
        </span>
      </a>
</h2>

现有资源

看起来您的按钮高于h2。您可以使h2的线条高度与按钮高度相同，或者为h2添加一些顶部填充。另一种解决方案是使h2相对位置和按钮绝对，而不是使用例如：

right:0控制按钮；底部：0

。看起来好多了，但我不知道你是怎么改的。有没有其他方法可以让按钮在div/h2中右对齐而不使用

float

？