右侧的引导列表组项目位置按钮

Question

我有以下内容：

如何将按钮放在靠近元素右侧的位置？ （对齐于名称级别）

html

<div class='list-group-item flex-column disabled'>
  <span class='circle'></span>
  <p class='name'>Name</p>
  <button id="test" type="button">Reject</button>
</div>

CSS

.circle {
    display: table-cell;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background: #c7c7c7;
}

#test {
    float:right;
}

.name {
    display: table-cell;
    vertical-align: middle;
    padding-left: 5px;
}

我想要这个：

Answer 1

您可以使用Bootstrap 4中包含的Flex Utility classes。

将.d-flex和.align-items-center添加到容器中。

最后，p默认为margin-bottom。取下它以确保它垂直居中。更新左右边距以添加间距。

＆＃13;

＆＃13;

.circle {
  display: block;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: #c7c7c7;
}

.name {
  margin: 0 5px;
}

＆＃13;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class='list-group-item d-flex align-items-center disabled'>
  <span class='circle'></span>
  <p class='name'>Name</p>
  <button id="test" type="button">Reject</button>
</div>

＆＃13;

＆＃13;

＆＃13;