Question

我有一个棘手的问题。我想将两个按钮与面板标题对齐，并使其对齐正确。但是，当我将它们放入时，我得到了：

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>

我想要的结果是按钮与标题对齐。

谢谢！

Answer 1

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

<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/

Answer 2

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

<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>

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

2 个答案: