Html 类似表格的对齐输入元素和标签_Html_Css

Html 类似表格的对齐输入元素和标签

html css

Html 类似表格的对齐输入元素和标签,html,css,Html,Css,如何对齐此表单的以下input元素，使其类似于一个表，标签位于顶行，而input框位于底行，以便每个标签位于相应的input框的上方，是否在表单的左下角使用箭头按钮，在右下角使用plus按钮和保存按钮？还可以优雅地调整不同的屏幕大小 <body>  <div id="header"> <h1><i class="fa fa-book"></i> loGym&l

如何对齐此

表单的以下input
元素，使其类似于一个表，标签位于顶行，而input
框位于底行，以便每个标签位于相应的input
框的上方，是否在表单的左下角使用箭头按钮
，在右下角使用plus按钮
和保存按钮？还可以优雅地调整不同的屏幕大小
<body>
  <!-- Title & logo -->
  <div id="header">
    <h1><i class="fa fa-book"></i> loGym</h1>
  </div>

  <!-- Main body of page -->
  <main role=”main”>
      <div id="description">
          <p>Fill in your workout and then click <i>Save Workout</i> when you are done.</p>
          <p>To add and extra column for reps and kg's, click the <i class="fa fa-plus-circle"></i> sign on your screen.</p>
          <p>To add and extra row, click the <i class="fa fa-arrow-circle-down"></i> sign on your screen.</p>
      </div>

      <div id="workouts">
        <form id="workout-form">
              <label for="exercise" class="labels">Exercise</label><input type="text" id="exercise" placeholder="Which exercise?" autofocus />
              <label for="musclegroup" class="labels">Muscle-Group</label><input type="text" id="musclegroup" placeholder="Which muscle-group?" />

              <div id="sets">
                  <label for="reps" class="labels">Reps</label><input type="text" id="reps" class="reps-column" placeholder="How many reps?" />
                  <label for="kilos" class="labels">Kg's</label><input type="text" id="kilos" class="kilos-column" placeholder="How much Kg?" />
              </div>
              <button id="add-column"class="add-buttons" type="button"><i class="fa fa-plus-circle fa-2x"></i></button>
              <button id="add-row" class="add-buttons" type="button"><i class="fa fa-arrow-circle-down fa-2x"></i></button>
              <button id="submit-workout" type="submit" name="submitbutton"><strong>Save Workout</strong></button>
        </form>
      </div>

  </main>

</body>


洛格姆
填写训练，完成后单击“保存训练”
要为Rep和kg添加和附加列，请单击屏幕上的标志
要添加和增加行，请单击屏幕上的符号
运动
肌肉群
代表
千克
保存训练

我曾尝试使用float:left
和clear
并更改它们的位置和显示
，但它们经常重叠或不在一条线上。
。

@mmr不要尝试这个-@avrilalejandro添加
并不能解决问题。这只会弄乱布局。@MaryMelody谢谢。虽然这不是我在描述中的目标，但一旦屏幕大小为移动设备大小，这就是我想要的。@MMRibot请共享您的CSS代码或尝试制作一个小提琴演示，如下图所示-