首页 文章

如何将面板 Headers 中的文本与拉到右侧的按钮对齐

提问于
浏览 次
4

我在bootstrap中创建了一个面板 Headers ，并尝试将其文本居中，同时有一个按钮，该按钮应该与文本位于同一水平轴上但在右侧拉出但我的输出是：

  • 该按钮未与文本水平对齐

  • 文本位于 Headers 左侧和按钮左侧的中心，而不是在 Headers 的左侧和右侧之间居中

这是我的代码：

<div class='container'>
    <div class='panel panel-default'>
        <div class='panel-heading'>
            <div class='panel-heading text-center'>
                <h4>Present Schedule<button class='btn pull-right btn-danger' onclick="location.href='past_sched.php'">Go to Past Schedule</button></h4>
            </div>
        </div>
    </div>
</div>

这是结果的jsfiddle：https://jsfiddle.net/63c0wn66/3/

html css twitter-bootstrap

2 回答

  • 8

    试试这个代码 . 把按钮放在h4外面

    HTML

    <div class='container'>
  <div class='panel panel-default'>
    <div class='panel-heading text-center panel-relative'>
    <button class='btn btn-danger btn-right' onclick="location.href='past_sched.php'">Go to Past Schedule</button>
      <h4>Present Schedule</h4>
    </div>
  </div>
</div>

    CSS

    .panel-relative{
  position: relative;
}
.btn-right{
  position: absolute;
  right: 15px;
}

    https://jsfiddle.net/63c0wn66/7/

    回复于
  • 1

    1）把你的 button 放在 h4 之外
    2）申请 h4 property display: inline-block

    <div class='container'>
  <div class='panel panel-default'>
    <div class='panel-heading text-center'>
      <h4 class="myClass">Present Schedule</h4>
      <button class='btn pull-right btn-danger' onclick="location.href='past_sched.php'">Go to Past Schedule</button>
    </div>
  </div>
</div>

.myClass {
  display: inline-block;
}

    JSFiddle

    回复于

相关问题