Style HTML 形式将元素并排放置

Question

我正在尝试制作一组彼此相邻的输入框，但无法正常工作。我试图让左侧保持在左侧，右侧与左侧保持一致。以下是我目前拥有的 HTML 和 CSS。我试过左右摆姿势，它们就保持原样。

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding-bottom: 5px;
  padding-right: 5px;
  text-align: right;
  font-weight: bold;
  font-size: 13px;
}

<div class="main">
  <div class="row">
    <!-- Begin left side data entry -->
    <form>
      <!-- Form tag is only used to allow the Clear button at the bottom to clear the data entry area. -->
      <div class="cell" style="padding-top: 10px; padding-left: 10px;display:block;">

        <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"># of Devices offline/Total Devices</div>
          <div class="cell"><input type="text" id="Q3" onChange="myLHDesc();store_value('Q3',this.value);" /></div>
        </div>
        <div class="row">
          <div class="cell">% Offline</div>
          <div class="cell"><input type="text" id="Q4" onChange="myLHDesc();store_value('Q4',this.value);" /></div>
        </div>
        <div class="row">
          <div class="cell">Power Supply</div>
          <div class="cell"><input type="text" id="Q5" onChange="myLHDesc();store_value('Q5',this.value);" /></div>
        </div>
        <div class="row">
          <div class="cell">SNR</div>
          <div class="cell"><input type="text" id="Q6" onChange="myLHDesc();store_value('Q6',this.value);" /></div>
        </div>
        <div class="row">
          <div class="cell">Dispatched or CBT</div>
          <div class="cell"><input type="text" id="Q7" onChange="myLHDesc();store_value('Q7',this.value);" /></div>
        </div>
        <div class="row">
          <div class="cell">Tech Phone #</div>
          <div class="cell"><input type="text" id="Q8" onChange="myLHDesc();store_value('Q8',this.value);" /></div>
        </div>
        <div class="row">
          <div class="cell">ETA</div>
          <div class="cell"><input type="text" id="Q9" onChange="myLHDesc();store_value('Q9',this.value);" /></div>
        </div>
        <div class="row">
          <div class="cell">Address Block</div>
          <div class="cell"><textarea style="height: 100px;" input type="text" id="Q10" onChange="myLHDesc();store_value('Q10',this.value);"></textarea></div>
        </div>
        <div class="row">
          <div class="cell">Individual Addresses</div>
          <div class="cell"><textarea style="height: 100px;" input type="text" id="Q11" onChange="myLHDesc();store_value('Q11',this.value);"></textarea></div>
        </div>
        <div class="row">
          <div class="cell">Ping Stats</div>
          <div class="cell"><textarea style="height: 100px;" input type="text" id="Q12" onChange="myLHDesc();store_value('Q12',this.value);"></textarea></div>
        </div>
        <div class="row">
          <div class="cell">SNR</div>
          <div class="cell"><textarea style="height: 100px;" input type="text" id="Q13" onChange="myLHDesc();store_value('Q13',this.value);"></textarea></div>
        </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>
  </div>
  </form>

  <!-- Right side for result box -->
  <div class="cell" style="vertical-align: top; padding-top: 10px; padding-left: 650px; float: left;">
    <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>
  <!-- Notification Box -->
  <div class="cell" style="vertical-align: top; padding-top: 10px; padding-left: 650px; float: left;">
    <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>

Answer 1

display : flex on the parent div or display : inline-block on the child input elements will position elements to next to other

Style HTML 形式将元素并排放置

Style HTML form to place elements next to each other

html

css

forms

styling