时间戳

首页 > 解决方案 > 右侧的引导列表组项放置按钮

html - 右侧的引导列表组项放置按钮

问题描述

我有以下内容： 在此处输入图像描述

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

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

我想要这个： Jsfiddle在此处输入图像描述

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

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

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

最后，默认p有一个margin-bottom。删除它以确保它垂直居中。更新左右边距以添加间距。

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

.name {
  margin: 0 5px;
}
<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>

推荐阅读