无法将按钮与面板标题对齐

我有一个棘手的问题。我想将两个按钮与面板标题保持一致，并让它们正确地合理。但是，当我将它们放在其中时，我得到了：

https://jsfiddle.net/mwoods98/fo58qswn/3/

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><strong>Order Summary Details</strong></h3><span class="pull-right" style="position: relative;top: -110%;"><button class="btn btn-primary pull-right" type="button"><span class="pull-right" style="position: relative;top: -110%;">Print Summary</span> <a href="#event.buildlink(rc.printLabel)#?label=#order_id#" onclick="window.open(this.href,'_blank','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=700,height=300'); return false;" role="button"><button class="btn btn-primary" type="button">Print Label</button></a></button></span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

我想要的结果是与标题在同一行上对齐的按钮。

谢谢！

您可以设置按钮的位置绝对：

<span class="pull-right" style="position: absolute;top: 2px;right: 21px;">
     <button type="button" class="btn btn-primary pull-right">Print Summary</button>
     <a href="#event.buildlink(rc.printLabel)#?label=#order_id#" onclick="window.open(this.href,'_blank','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=700,height=300'); return false;" role="button"> <button type="button" class="btn btn-primary">Print Label</button></a>
</span>

https://jsfiddle.net/xewls6t2/

另一个解决方案可以是这样的：

<div class="row">
  <div class="col-md-12">
    <div class="panel panel-default">
      <div class="panel-heading" style="height: 40px;">
        <h3 class="panel-title"><strong>Order Summary Details</strong></h3>
        <div style="margin-top: -25px;" class="pull-right">
          <button type="button" class="btn btn-primary">Print Summary</button>
          <a href="#event.buildlink(rc.printLabel)#?label=#order_id#" onclick="window.open(this.href,'_blank','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=700,height=300'); return false;" role="button" class="btn btn-primary">Print Label </a>
        </div>
      </div>
    </div>
  </div>
</div>

相关内容

最新更新

热门标签：