使用无序列表模拟表格：首行与其他行前3列对齐问题求助

首先你代码里有个明显的结构错误：后面两行的cell标签写法混乱，比如<span class="cell"></span><input type="text" ...>这种写法把闭合标签提前了，导致input不在cell容器里，这是布局错位的核心原因之一。

修正后的HTML代码 #

<ul class="table">
  <li>
    <span class="cell">Name</span>
    <span class="cell">Country</span>
    <span class="cell">Age</span>
    <span class="cell_buttons"></span> <!-- 用和按钮列一致的类，保证宽度匹配 -->
  </li>
  <li>
    <form>
      <span class="cell"><input type="text" name="name" placeholder="" value="Ankit" readonly></span>
      <span class="cell"><input type="text" name="country" placeholder="" value="India" readonly></span>
      <span class="cell"><input type="text" name="age" placeholder="" value="20" readonly></span>
      <span class="cell_buttons">
        <button class="edit">Edit</button>
        <button class="save">Save</button>
        <button class="delete">Delete</button>
      </span>
    </form>
  </li>
  <li>
    <form>
      <span class="cell"><input type="text" name="name" placeholder="" value="Shawn" readonly></span>
      <span class="cell"><input type="text" name="country" placeholder="" value="Canada" readonly></span>
      <span class="cell"><input type="text" name="age" placeholder="" value="26" readonly></span>
      <span class="cell_buttons">
        <button class="edit">Edit</button>
        <button class="save">Save</button>
        <button class="delete">Delete</button>
      </span>
    </form>
  </li>
</ul>

关键CSS代码（实现对齐） #

/* 把每个列表项变成flex容器，子元素横向排列 */
.table li {
  display: flex;
  gap: 8px; /* 列之间的间距，可按需调整 */
  margin: 8px 0;
}

/* 前3列设置均分规则，也可以改成固定宽度比如200px */
.cell {
  flex: 1;
  padding: 4px;
  border: 1px solid #ddd;
  box-sizing: border-box;
}

/* 按钮列设固定宽度，避免被挤压变形 */
.cell_buttons {
  width: 180px;
  padding: 4px;
  box-sizing: border-box;
}

/* 清除ul默认样式 */
.table {
  list-style: none;
  padding: 0;
  margin: 0;
}

核心逻辑 #

1. 首行第四列使用cell_buttons类，确保和其他行的按钮列宽度一致，让前3列自然对齐。
2. 用flex布局替代传统浮动，无需复杂计算就能实现均匀分布的列布局。
3. 修正HTML标签错误，保证每个输入框都在对应的cell容器内，结构正确是布局生效的前提。

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