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>

我无法使标签与输入正确对齐。我已经滚动并添加了表单，但是它很笨拙地组合在一起，而且看起来不太好。我将继续努力，如果发现有问题，我将对其进行更新。同时，这里有一些问题对我有帮助：

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

非常感谢您！

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

0 个答案: