HTML/CSS : list button among themselves

Question

<ul class='list'>
<li class='list-item'>
    <span>Entry 1</span>
    <span class='button-group'>
        <button>Delete</button>
    </span>
</li>
<li class='list-item'>
    <span>Entry 2</span>
    <span class='button-group'>
        <button>Delete</button>
    </span>
</li>
</ul>

我想将按钮放在它们之间。

这行不通:

button {
    margin: 0;
    float: right;
}

我该如何解决这个问题？非常感谢...

Answer 1

您的代码可以正常工作，只是缺少更多调整。

如果按钮、图像和其他类似元素是 float 的，它们往往会从其包含的列表项中溢出。

首先，我建议 float 按钮容器而不是按钮。如果您需要添加更多按钮，它们将立即 float 并保持正确的顺序。

其次，为您的列表项添加一个高度，使它们至少与您的按钮一样高。这样，按钮将正确对齐。

li {
  min-height: 24px;
}

.button-group {
  display: inline-block;
  float: right;
}

<ul class='list'>
<li class='list-item'>
    <span>Entry 1</span>
    <span class='button-group'>
        <button>Delete</button>
    </span>
</li>
<li class='list-item'>
    <span>Entry 2</span>
    <span class='button-group'>
        <button>Delete</button>
    </span>
</li>
</ul>