Question

我希望我的＆＃34;填写＆＃34;要与复选框和文本条目正确对齐的文本。顶部始终显示正确对齐。

当底部文本框为空时，＆＃34;填写＆＃34;消息显示在顶行，而不是在第二行的假设位置。

下面的图片说明了这个问题。范围文本仅显示文本条目是否为空。

 <ul class="answerList" data-bind="foreach: answers">

     <li>
     <span data-bind="text: answerError"></span>
     <input type="hidden" data-bind="value: id, attr: { name: 'Questions[' + $parentContext.$index() + '].Answers[' + $index() + '].Id' }" />
     <input type="hidden" data-bind="value: isCorrect, attr: { name: 'Questions[' + $parentContext.$index() + '].Answers[' + $index() + '].IsCorrect' }" />
     <input type="hidden" data-bind="value: $index(), attr: { name: 'Questions[' + $parentContext.$index() + '].Answers[' + $index() + '].SortOrder' }" />
    <input type="text" data-bind="value: text, attr: { 'name': 'Questions[' + $parentContext.$index() + '].Answers[' + $index() + '].Text' }" />
     <input type="checkbox" data-bind="checked: isCorrect, attr: { 'name': 'question' + $parentContext.$index() + 'IsCorrect' }" />
     <a data-bind="click: remove, visible: removeEnabled" class="btn btn-danger"><i class="icon-remove icon-white">x</i></a>

  </li>
 </ul>

我的css

         .answerList {
            li {
                list-style: none;


                input[type='text'] {
                    width: 90%;
                    float: right;
                }

                input[type="checkbox"] {
                    margin-right: 10px;
                    float: right;
                }

            }

感谢您的帮助。

Answer 1

我不清楚你想要各种情况如何工作，但我已经简化了你的代码并将代码段放在下面，以便你和其他人可以使用它。我认为您应该取消使用float并为display尝试不同的选项，可能是table-*设置，或者flex

function Obj(name) {
  this.text = name;
}
Obj.prototype = {
  answerError: 'Fill in',
  isCorrect: function() {
    return true;
  },
  remove: function() {},
  removeEnabled: function() { return Math.random() > 0.5 ? true : false; }
};

vm = {
  answers: [
    new Obj('one'),
    new Obj('two'),
    new Obj('three')
  ]
};

ko.applyBindings(vm);

.answerList li {
  list-style: none;
}
.answerList li input[type='text'] {
  width: 90%;
}
.answerList li input[type="checkbox"] {
  margin-right: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul class="answerList" data-bind="foreach: answers">

  <li>
    <span data-bind="text: answerError"></span>
    <!--input type="hidden" data-bind="value: id, attr: { name: 'Questions[' + $parentContext.$index() + '].Answers[' + $index() + '].Id' }" />
    <input type="hidden" data-bind="value: isCorrect, attr: { name: 'Questions[' + $parentContext.$index() + '].Answers[' + $index() + '].IsCorrect' }" />
    <input type="hidden" data-bind="value: $index(), attr: { name: 'Questions[' + $parentContext.$index() + '].Answers[' + $index() + '].SortOrder' }" /-->
    <a data-bind="click: remove, visible: removeEnabled()" class="btn btn-danger"><i class="icon-remove icon-white">x</i></a>
    <input type="checkbox" data-bind="checked: isCorrect" />
    <input type="text" data-bind="value: text, " />

  </li>
</ul>

敲出一个显示怪异的ul。我该如何解决？

1 个答案: