如何让我的输入框在 HTML 上排列 (3x3) 而不是 (1x9)？

Question

我正在编写一个代码，允许您运行 3 个单独的 spring 模拟，您可以在其中独立地使用输入框调整质量、spring 常量和阻尼系数。他们一个接一个地出来盒子盒子盒子盒子 . . . 盒子 9次。我怎样才能将它们移动到 3 x 3。左边 3 个，中间 3 个，右边 3 个？盒子盒子盒子盒子盒子盒子盒子盒子盒子

<html>
<header>
    <title>Diaz's Harmonic Oscillator</title>
</header>
<body>
    <style>
    .HarmonicOscillator-input {
        font-family: inherit;
        font-size: 100%;
        margin: 0;
        padding: 10px 7px 7px 7px;
    }
    
    .HarmonicOscillator-inputSmall { width: 5em; }
    .HarmonicOscillator-isTextCentered { text-align: center; }
    </style>
    <div>
        <canvas id="myCanvas" width="1500" height="500"></canvas>
        <button type = "button" id="myButton" onclick="resetButton()" 40px >Reset</button>

    </div>
    <div class="HarmonicOscillator">
        <canvas class="HarmonicOscillator-canvas"></canvas>
        
        <p class="HarmonicOscillator-isTextCentered">Top Mass<br>
            <input class="HarmonicOscillator-input HarmonicOscillator-inputSmall HarmonicOscillator-isTextCentered" 
                type="number" id="HarmonicOscillator-topMass" min="1" max="10000" step="1" pattern="\d*"
            >
        </p>
        
        <p class="HarmonicOscillator-isTextCentered">Top Spring constant<br>
            <input class="HarmonicOscillator-input HarmonicOscillator-inputSmall HarmonicOscillator-isTextCentered" 
                type="number" id="HarmonicOscillator-topSpringConstant" name="topSpringConstant" min="1" max="10000" step="1" pattern="\d*"
            >
        </p>

        <p class="HarmonicOscillator-isTextCentered">Top Damping Coefficient<br>
            <input class="HarmonicOscillator-input HarmonicOscillator-inputSmall HarmonicOscillator-isTextCentered" 
                type="number" id="HarmonicOscillator-topDampCoefficient" name="topDampCoefficient" min="0" max="10000" step="1" pattern="\d*"
            >
        </p>
        <p class="HarmonicOscillator-isTextCentered">Mass<br>
            <input class="HarmonicOscillator-input HarmonicOscillator-inputSmall HarmonicOscillator-isTextCentered" 
                type="number" id="HarmonicOscillator-mass" min="1" max="10000" step="1" pattern="\d*"
            >
        </p>
        <p class="HarmonicOscillator-isTextCentered">Spring constant<br>
            <input class="HarmonicOscillator-input HarmonicOscillator-inputSmall HarmonicOscillator-isTextCentered" 
                type="number" id="HarmonicOscillator-springConstant" name="springConstant" min="1" max="10000" step="1" pattern="\d*"
            >
        </p>

        <p class="HarmonicOscillator-isTextCentered">Damping Coefficient<br>
            <input class="HarmonicOscillator-input HarmonicOscillator-inputSmall HarmonicOscillator-isTextCentered" 
                type="number" id="HarmonicOscillator-dampCoefficient" name="dampCoefficient" min="0" max="10000" step="1" pattern="\d*"
            >
        </p>
        
        <p class="HarmonicOscillator-isTextCentered">Bottom Mass<br>
            <input class="HarmonicOscillator-input HarmonicOscillator-inputSmall HarmonicOscillator-isTextCentered" 
                type="number" id="HarmonicOscillator-bottomMass" min="1" max="10000" step="1" pattern="\d*"
            >
        </p>
        <p class="HarmonicOscillator-isTextCentered">Bottom Spring constant<br>
            <input class="HarmonicOscillator-input HarmonicOscillator-inputSmall HarmonicOscillator-isTextCentered" 
                type="number" id="HarmonicOscillator-bottomSpringConstant" name="bottomSpringConstant" min="1" max="10000" step="1" pattern="\d*"
            >
        </p>

        <p class="HarmonicOscillator-isTextCentered">Bottom Damping Coefficient<br>
            <input class="HarmonicOscillator-input HarmonicOscillator-inputSmall HarmonicOscillator-isTextCentered" 
                type="number" id="HarmonicOscillator-bottomDampCoefficient" name="bottomDampCoefficient" min="0" max="10000" step="1" pattern="\d*"
            >
        </p>
    </div>


    <script src="sandBox.js"></script>
</body>

Answer 1

将 display:inline-block 应用于包含输入的 p 标签，然后在需要时插入换行符。

p.HarmonicOscillator-isTextCentered {
  display: inline-block;
}

<html>
<header>
  <title>Diaz's Harmonic Oscillator</title>
</header>

<body>
  <style>
    .HarmonicOscillator-input {
      font-family: inherit;
      font-size: 100%;
      margin: 0;
      padding: 10px 7px 7px 7px;
    }
    
    .HarmonicOscillator-inputSmall {
      width: 5em;
    }
    
    .HarmonicOscillator-isTextCentered {
      text-align: center;
    }
  </style>
  <div>
    <canvas id="myCanvas" width="1500" height="500"></canvas>
    <button type="button" id="myButton" onclick="resetButton()" 40px>Reset</button>

  </div>
  <div class="HarmonicOscillator">
    <canvas class="HarmonicOscillator-canvas"></canvas>
    <br/>
    <p class="HarmonicOscillator-isTextCentered">Top Mass<br>
      <input class="HarmonicOscillator-input HarmonicOscillator-inputSmall HarmonicOscillator-isTextCentered" type="number" id="HarmonicOscillator-topMass" min="1" max="10000" step="1" pattern="\d*">
    </p>

    <p class="HarmonicOscillator-isTextCentered">Top Spring constant<br>
      <input class="HarmonicOscillator-input HarmonicOscillator-inputSmall HarmonicOscillator-isTextCentered" type="number" id="HarmonicOscillator-topSpringConstant" name="topSpringConstant" min="1" max="10000" step="1" pattern="\d*">
    </p>

    <p class="HarmonicOscillator-isTextCentered">Top Damping Coefficient<br>
      <input class="HarmonicOscillator-input HarmonicOscillator-inputSmall HarmonicOscillator-isTextCentered" type="number" id="HarmonicOscillator-topDampCoefficient" name="topDampCoefficient" min="0" max="10000" step="1" pattern="\d*">
    </p>
    <br/>
    <p class="HarmonicOscillator-isTextCentered">Mass<br>
      <input class="HarmonicOscillator-input HarmonicOscillator-inputSmall HarmonicOscillator-isTextCentered" type="number" id="HarmonicOscillator-mass" min="1" max="10000" step="1" pattern="\d*">
    </p>
    <p class="HarmonicOscillator-isTextCentered">Spring constant<br>
      <input class="HarmonicOscillator-input HarmonicOscillator-inputSmall HarmonicOscillator-isTextCentered" type="number" id="HarmonicOscillator-springConstant" name="springConstant" min="1" max="10000" step="1" pattern="\d*">
    </p>

    <p class="HarmonicOscillator-isTextCentered">Damping Coefficient<br>
      <input class="HarmonicOscillator-input HarmonicOscillator-inputSmall HarmonicOscillator-isTextCentered" type="number" id="HarmonicOscillator-dampCoefficient" name="dampCoefficient" min="0" max="10000" step="1" pattern="\d*">
    </p><br/>

    <p class="HarmonicOscillator-isTextCentered">Bottom Mass<br>
      <input class="HarmonicOscillator-input HarmonicOscillator-inputSmall HarmonicOscillator-isTextCentered" type="number" id="HarmonicOscillator-bottomMass" min="1" max="10000" step="1" pattern="\d*">
    </p>
    <p class="HarmonicOscillator-isTextCentered">Bottom Spring constant<br>
      <input class="HarmonicOscillator-input HarmonicOscillator-inputSmall HarmonicOscillator-isTextCentered" type="number" id="HarmonicOscillator-bottomSpringConstant" name="bottomSpringConstant" min="1" max="10000" step="1" pattern="\d*">
    </p>

    <p class="HarmonicOscillator-isTextCentered">Bottom Damping Coefficient<br>
      <input class="HarmonicOscillator-input HarmonicOscillator-inputSmall HarmonicOscillator-isTextCentered" type="number" id="HarmonicOscillator-bottomDampCoefficient" name="bottomDampCoefficient" min="0" max="10000" step="1" pattern="\d*">
    </p>
  </div>


  <script src="sandBox.js"></script>
</body>

如何让我的输入框在 HTML 上排列 (3x3) 而不是 (1x9)？

How do I get my input boxes to line up (3x3) instead of (1x9) on HTML?

html

html5-canvas