Question

我正在使用Bootstrap，我想在条形图右侧添加一个看起来像<input-group-addon>的按钮。具体而言，全高并位于最右侧。

我已经尝试了height: 100%，但按钮样式超高。

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

这就是我正在寻找的

Answer 1

父母需要position:relative。然后，您可以使用height:100%

将按钮完全放在角落

＆＃13;

.panel-heading{
  position:relative;
}

button.btn{
  float: none;
  margin-right: 0;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}

＆＃13;

    <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">Assist Panel<button style="float:right;margin-right:0;" class="btn" onclick="assist_close()"><i class="fa fa-chevron-left"></i></button></div>
      <div class="panel-body"></div>
    </div>
  </body>

＆＃13;

Answer 2

尝试绝对定位按钮：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

使用排名属性

＆＃13;

.panel-heading{
  position: relative;
}
button.btn{
  position: absolute;
  top:0;
  bottom:0;
  border-radius: 0;
  right: 0;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="panel panel-default">
      <div class="panel-heading">Assist Panel<button class="btn" onclick="assist_close()"><i class="fa fa-chevron-left"></i></button></div>
      <div class="panel-body"></div>
    </div>

＆＃13;

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

3 个答案: