如何使父容器的按钮全高并右对齐?

Zan*_*cat 5 css twitter-bootstrap

我正在使用Bootstrap,我想在一个看起来像<input-group-addon>. 具体来说,全高且位于最右侧。

我试过了,height: 100%但按钮样式超高。

这是我的代码的一部分:https : //plnkr.co/edit/lK8vt0wT1xDesuOZW8vU?p=preview

这就是我要找的 在此处输入图片说明

fen*_*n1x 7

尝试绝对定位您的按钮:

.my-heading {
  position: relative;
}

.btn.my-btn {
  position:absolute;
  right: 0;
  top: 0;
  height: 100%;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
Run Code Online (Sandbox Code Playgroud)
<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
  <div class="panel panel-default">
    <div class="panel-heading my-heading">Assist Panel<button class="my-btn btn"><i class="fa fa-chevron-left"></i></button></div>
    <div class="panel-body"></div>
  </div>
</body>
Run Code Online (Sandbox Code Playgroud)