如何在不影响内联块的垂直对齐的情况下向右浮动？

Question

我有一个挑战，并希望在我使用Bootstrap的同时以最小的努力自定义方面知道最干净的解决方案（并尝试在没有硬编码值的情况下解决，因为我希望将其用作Angular的组件......）

下面是代码，但基本上我的标题有问题。两个孩子，一个是文本，另一个是包含按钮的div，我想在水平方向上向右移动。不幸的是，当我这样做时，那些留在左边的文字正在失去垂直对齐。

这里是代码，我想在中间使用Button：

.pi-button-with-buttons{
  width: 100%;
  height: 50px !important;
  text-align: left !important;
}

.pi-button-with-buttons span {
  vertical-align: middle;
}

.pi-button-with-buttons div {
  display: inline-block;
  float:right;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="btn btn-default pi-button-with-buttons">
    <span>Button</span> 
    <div> 
     <a class="btn btn-default" role="button">Inside 1</a> 
     <a class="btn btn-default" role="button">Inside 2</a> 
    </div> 
</div>

提前感谢您的帮助！

Answer 1

选项 1 ：使用flexbox

＆＃13;

＆＃13;

.pi-button-with-buttons{
  width: 100%;
  height: 50px !important;
  text-align: left !important;
}

.pi-button-with-buttons span {
  display: inline-flex;
  align-items: center;
  height: 100%;
}

.pi-button-with-buttons div {
  display: inline-block;
  float:right;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="btn btn-default pi-button-with-buttons">
    <span>Button</span> 
    <div> 
     <a class="btn btn-default" role="button">Inside 1</a> 
     <a class="btn btn-default" role="button">Inside 2</a> 
    </div> 
</div>

＆＃13;

＆＃13;

＆＃13;

选项2 ：使用line-height

＆＃13;

＆＃13;

.pi-button-with-buttons {
  width: 100%;
  height: 50px !important;
  text-align: left !important;
}

.pi-button-with-buttons span {
  line-height: 36px;
}

.pi-button-with-buttons div {
  display: inline-block;
  float: right;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="btn btn-default pi-button-with-buttons">
  <span>Button</span>
  <div>
    <a class="btn btn-default" role="button">Inside 1</a>
    <a class="btn btn-default" role="button">Inside 2</a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

是的，不幸的是浮动：右丢失显示：内联块行为。相反，删除float：right并在包装器上使用flexbox，如下所示：

.btn-default {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}

Answer 3

您可以像这样简单地使用flex：

.pi-button-with-buttons{
  width: 100%;
  height: 50px !important;
  display:flex!important;
  align-items:center;
}

.pi-button-with-buttons div {
  flex:1;
  text-align:right;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="btn btn-default pi-button-with-buttons">
    <span>Button</span> 
    <div> 
     <a class="btn btn-default" role="button">Inside 1</a> 
     <a class="btn btn-default" role="button">Inside 2</a> 
    </div> 
</div>