HTML/CSS：按钮之间的列表按钮

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

您的代码正在工作，它只是缺少一些更多的调整。

如果按钮，图像和其他类似元素浮动，它们往往会从其包含的列表项中流失。

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

第二，给列表项添加高度，使它们至少与按钮一样高。这样，这些按钮将正确对齐。

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>