javascript - 如何将静态标签与动态创建的表单的滚动容器对齐？

Question

我希望输入的标签和描述位于水平滚动的表单数组的左侧。理想情况下，它们都有自己的提交按钮和一个全部提交按钮。我已经尝试了我想要的更小的版本。这是我现在在小提琴中得到的：

https://jsfiddle.net/RedGoblin17/2r3hufpa/58/。

我认为我在视图模型上非常接近：

function FormViewModel(){
    var self = this;

  self.firstName = ko.observable("");
  self.lastName = ko.observable("");
  self.number = ko.observable();
  self.data = ko.computed(
    function(){
        return self.firstName() + " " + self.lastName() + " " + (typeof self.number() == "undefined" ? "" : self.number());
      }, this
    );
}

function AppViewModel(){
    var self = this;

  self.forms = new ko.observableArray([new FormViewModel()]);

  self.addForm = function(){
    self.forms.push(new FormViewModel());
  }
}

ko.applyBindings(new AppViewModel());

但我不知道如何将标签放在与输入不同的 div 中，并且仍然正确排列它们：

<div class="scroll-grid-container">
  <div class="frozelabels">
     <label for="fn">First Name</label> 
     <label for="ln">Last Name</label>
     <label for="nn">Number</label>
     <label for="fullN">Full Name:</label>
  </div>
  <div class="scrolling-wrapper" data-bind="foreach: forms">
  <div class="card" >
    <form class="form-group">
     <input id="fn" type="text" data-bind="textInput: firstName"/><br>
     <input id="ln" type="text" data-bind="textInput: lastName"/><br>
     <input id="nn" type="number" min="1" data-bind="value: number"/>
    </form>

    <p>

      <br /><strong id="fullN" data-bind="text: data"></strong>
    </p>
  </div>
</div>
</div> 

<button data-bind="click: addForm">Add New Form</button>

我无法让标签与输入正确对齐。我已经让它滚动并添加表单，但它的组合非常简单，看起来不太好。我会继续努力，如果我弄明白了，我会更新这篇文章。同时，这里有一些可以帮助我的问题：

有没有办法将标签与表单的输入对齐？有没有办法在它旁边显示一个可滚动的表单列表？如果我离基地不太远，你能指出我的例子吗？

非常感谢！

标签： javascripthtmlcssknockout.js