如何格式化 HTML 表单的一部分以将部分放入列中？

Question

我想知道是否有办法让 HTML 表单信息块显示在列中，最好基于屏幕宽度，但 3 列的固定宽度也可以。

在此处放入大量代码将是荒谬的，因此我将仅放入一个块。只需将此 HTML 代码成像 30-40 次（每次都有不同的信息），需要在列中。不是“section-container”div 中的单个行项目，而是整个部分。

<div class="section-container">
  <ul class="selection-list">
    <div class="item-group">
    <label>What symptoms are they experiencing?</label><br />
    <input type="checkbox" name="depPresent[]" id="depPresent" value="anxiety" />Depressed Mood
    <br />Severity: &nbsp;
    <input type="radio" name="sxDep" id="sxDepMild" value="mild" required />Mild &emsp; 
    <input type="radio" name="sxDep" id="sxDepModerate" value="moderate" required />Moderate &emsp;
    <input type="radio" name="sxDep" id="sxDepSevere" value="severe" required />Severe &emsp;
    <br />Notes:<li><input type="text" name="depNotes[]" id="depNotes" value="" /></li>
    </div>
  </ul>
</div> 

我们的想法是它看起来像这样，而不是在单个列中：

任何帮助将不胜感激。

Answer 1

您可以使用 display: flex 和 display: grid 完成结果。您也可以使用 column-count: 3; 。它将内容分成3部分。
Read this for more about multi-column

使用<br /> 换行，使用label 换行input。使用适当的样式和装饰，您可以达到预期的效果。
以下sn-p仅供演示，仅使用了一定的装饰

这里默认的padding margin 被删除以获得清晰的视图。建议不要使用它，而是根据需要删除各个属性。

以下代码仅用于演示如何在屏幕截图中进行操作。建议使用flex 或grid 来获得所需的结果，因为它将提供对内容渲染的更多控制

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.section-container {
  width: 100%;
  column-width: 30%;
  column-gap: 3%;
  column-count: 3;
}

label {
  display: inline-block;
  width: 100%;
  background-color: red;
}

li {
  list-style-position: inside
}

<div class="section-container">
  <ul class="selection-list">
    <div class="item-group">
      <label>What symptoms are they experiencing?</label><br />
      <input type="checkbox" name="depPresent[]" id="depPresent" value="anxiety" />Depressed Mood
      <br />Severity: &nbsp;
      <label for="sxDepMild"><input type="radio" name="sxDep" id="sxDepMild" value="mild" required />Mild &emsp;</label><br />
      <label for="sxDepModerate"><input type="radio" name="sxDep" id="sxDepModerate" value="moderate" required />Moderate  &emsp;</label><br />
      <label for="sxDepSevere"><input type="radio" name="sxDep" id="sxDepSevere" value="severe" required />Severe &emsp; </label><br />
      <label for="sxDepMild"><input type="radio" name="sxDep" id="sxDepMild" value="mild" required />Mild &emsp;</label><br />
      <label for="sxDepModerate"><input type="radio" name="sxDep" id="sxDepModerate" value="moderate" required />Moderate  &emsp;</label><br />
      <label for="sxDepSevere"><input type="radio" name="sxDep" id="sxDepSevere" value="severe" required />Severe &emsp; </label><br />
      <label for="sxDepMild"><input type="radio" name="sxDep" id="sxDepMild" value="mild" required />Mild &emsp;</label><br />
      <label for="sxDepModerate"><input type="radio" name="sxDep" id="sxDepModerate" value="moderate" required />Moderate  &emsp;</label><br />
      <label for="sxDepSevere"><input type="radio" name="sxDep" id="sxDepSevere" value="severe" required />Severe &emsp; </label>
      <br />Notes:
      <li><input type="text" name="depNotes[]" id="depNotes" value="" /></li>
    </div>
  </ul>
</div>