如何调整HTML表单样式实现元素横向并排且左右对齐

我看了你目前的代码，问题核心在于混用了表格布局（table-row/table-cell）和浮动（float），同时结构嵌套逻辑错误，导致原本的表格布局完全失效，position属性自然也起不到预期作用。咱们一步步来修正：

问题点拆解 #

1. 你把<form>直接放在了.row（display:table-row）里，但table-row的直接子元素必须是table-cell，非表格元素会破坏布局规则
2. 右侧区域用了padding-left:650px这种固定偏移+float，完全违背了表格布局的对齐逻辑，只会让元素错位
3. 内部的.cell加了display:block，直接废掉了table-cell的并排特性

方案1：修正表格布局（贴合你原有的写法） #

先调整CSS，让表格布局的层级关系正确：

/* 最外层作为表格容器 */
.main {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 10px; /* 用间距代替零散padding，更整洁 */
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  padding: 5px;
  text-align: right;
  font-weight: bold;
  font-size: 13px;
  vertical-align: top; /* 强制所有单元格顶部对齐 */
}
/* 表单内部的表格布局独立处理 */
.form-inner .row {
  display: table-row;
}
.form-inner .cell {
  display: table-cell;
  text-align: right;
}
/* 输入框统一左对齐内容 */
input[type="text"], textarea {
  text-align: left;
}

再修正HTML结构，把三个区域（左侧表单、右侧结果、通知）分别放在独立的table-cell里：

<div class="main">
  <div class="row">
    <!-- 左侧数据输入区域 -->
    <div class="cell">
      <form class="form-inner">
        <div class="row">
          <div class="cell">LH</div>
          <div class="cell"><input type="text" id="Q1" onChange="myLHDesc();store_value('Q1',this.value);" /></div>
        </div>
        <div class="row">
          <div class="cell">Node</div>
          <div class="cell"><input type="text" id="Q2" onChange="myLHDesc();store_value('Q2',this.value);" /></div>
        </div>
        <!-- 省略中间重复的输入行 -->
        <div class="row">
          <div class="cell">&nbsp;</div>
          <div class="cell" style="text-align: center;"><input type="reset" value="Clear" onclick="myLHDesc();" /></div>
        </div>
      </form>
    </div>

    <!-- 右侧结果区域 -->
    <div class="cell">
      <div class="row">
        <div class="cell">Notes:</div>
        <div class="cell"><textarea id="LHDesc" rows="20" cols="49" style="overflow: scroll; width: 300px;" readonly></textarea></div>
      </div>
      <div class="row">
        <div class="cell">&nbsp;</div>
        <div class="cell" style="text-align: center;"><input type="button" value="Copy Notes" class="CopyDesc" /></div>
      </div>
    </div>

    <!-- 通知区域 -->
    <div class="cell">
      <div class="row">
        <div class="cell">Notification:</div>
        <div class="cell"><textarea id="LHDesc2" rows="10" cols="49" style="overflow: scroll; width: 200px;" readonly></textarea></div>
      </div>
      <div class="row">
        <div class="cell">&nbsp;</div>
        <div class="cell" style="text-align: center;"><input type="button" value="Copy Notification" class="CopyDesc2" /></div>
      </div>
    </div>
  </div>
</div>

方案2：用CSS Grid（更现代灵活的布局方式） #

如果想摆脱表格布局的嵌套限制，推荐用Grid，代码更简洁，响应式也更容易做：

.main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 三个区域各占1/3宽度，可按需调整比例 */
  gap: 15px; /* 区域间的间距 */
  padding: 10px;
}
.form-inner {
  display: grid;
  grid-template-columns: auto 1fr; /* 左侧标签自动宽度，输入框占剩余空间 */
  gap: 5px;
  align-items: center;
}
.cell {
  font-weight: bold;
  font-size: 13px;
  text-align: right;
}
input[type="text"], textarea {
  text-align: left;
}
/* 按钮行跨两列居中 */
.button-row {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 10px;
}

HTML对应调整按钮行：

<div class="button-row">
  <input type="reset" value="Clear" onclick="myLHDesc();" />
</div>

这样三个区域会自动横向并排，且所有内容顶部对齐，小屏幕下只需修改grid-template-columns:1fr就能切换成垂直布局。

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