如何将按钮与HTML中的文本水平对齐？

Question

我制作了一些使用javascript动态创建的div代码，每个div由3 <p>和2 <button>组成。现在我想对齐这些按钮，这些按钮是动态并排创建的，而不是文本下方。 见截图我已经显示了按钮的放置位置。

app.js：

contactList.innerHTML = '';
        for(var i in array) {
                    var id = i;
                    contactList.innerHTML +=
                       `
                        <li>
                        <div class="contactDetail">
                        <p>Name: ${array[i].fullName}</p>
                        <p>Number: ${array[i].number}</p>
                        <p>Group: ${array[i].group}</p>
                        <button type="button" class="btn btn-warning" onclick="editContact(${id})">Edit</button>
                        <button type="button" class="btn btn-danger" onclick="deleteMe(${id})">Delete</button>
                        </div>
                        </li>
                        `;
        }

截图我已经显示按钮的最终位置应该是使用箭头：

Answer 1

将文本和按钮包裹在div中并浮动它们。

＆＃13;

＆＃13;

.single('name')

＆＃13;

.contactDetail::after {
  content: '';
  clear: both;
  display: table;
}

.contactDetail__text {
  float: left;
}

.contactDetail__actions {
  float: right;
}

.contactDetail__actions .btn {
  display: block;
}

＆＃13;

＆＃13;

＆＃13;