<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;
}
我该如何解决这个问题?非常感谢...
最佳答案
您的代码可以正常工作,只是缺少更多调整。
如果按钮、图像和其他类似元素是 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>
关于HTML/CSS : list button among themselves,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36841319/