如何让按钮位于另一个HTML <ul>下方？附代码示例

我来帮你搞定这个布局问题！你现在的按钮是和列表项里的名字并排显示的，想要把按钮挪到<ul>相关区域的下方，分两种常见场景给你解决方案：

场景1：每个按钮位于对应列表项的下方 #

如果是想让每个按钮在自己对应的名字下方（而非同一行），只需要给<li>添加少量CSS样式，让它变成垂直布局即可：

修改后的代码 #

<ul>
  <li style="display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px;">
    <small style="margin-left:2px;">John: </small>
    <button class="btn btn-default btn-sm">C</button>
  </li>
  <li style="display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px;">
    <small style="margin-left:2px;">Eva: </small>
    <button class="btn btn-default btn-sm">B</button>
  </li>
  <li style="display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px;">
    <small style="margin-left:2px;">Michael: </small>
    <button class="btn btn-default btn-sm">A</button>
  </li>
</ul>

样式说明 #

• display: flex; flex-direction: column;：让<li>内部元素垂直排列，按钮自然落到名字下方
• gap: 4px;：给名字和按钮之间添加一点间距，视觉更舒适
• margin-bottom: 8px;：给每个列表项之间增加间距，避免过于拥挤

如果不想写内联样式，也可以把样式抽成CSS类：

.list-item-with-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

再给每个<li>加上这个类：<li class="list-item-with-btn">

场景2：所有按钮整体放在整个

的下方 #

如果是想把所有按钮从列表项中移出，统一放在整个<ul>的下方，可以调整HTML结构，把按钮移到<ul>外面，再用容器排版：

修改后的代码 #

<ul style="margin-bottom: 12px;">
  <li><small style="margin-left:2px;">John: </small></li>
  <li><small style="margin-left:2px;">Eva: </small></li>
  <li><small style="margin-left:2px;">Michael: </small></li>
</ul>
<div style="display: flex; gap: 8px;">
  <button class="btn btn-default btn-sm">C</button>
  <button class="btn btn-default btn-sm">B</button>
  <button class="btn btn-default btn-sm">A</button>
</div>

样式说明 #

• 先将按钮从<li>中移除，让<ul>仅显示名字内容
• 在<ul>后添加一个<div>容器来统一存放所有按钮
• display: flex; gap: 8px;：让按钮横向排列且保持间距；如果需要垂直排列，加上flex-direction: column;即可
• margin-bottom: 12px;：给<ul>和按钮容器之间添加间距，区分两个区域

内容的提问来源于stack exchange，提问作者bafix2203