HTML / CSS:列出自己之间的按钮

时间:2016-04-25 12:58:37

标签: html css list html-lists

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

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

1 个答案:

答案 0 :(得分:0)

您的代码正常运行,只是缺少一些调整。

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

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

其次,为列表项添加高度,使它们至少与按钮一样高。这样,按钮就会正确对齐。

&#13;
&#13;
li {
  min-height: 24px;
}

.button-group {
  display: inline-block;
  float: right;
}
&#13;
<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>
&#13;
&#13;
&#13;