如何在ko验证消息很长时对齐它

Question

我使用了ko验证消息来验证输入字段。如何将包装上的验证消息与指定位置对齐

<input id="personName" class="form-control placeholder has-error" type="text"
 data-bind="value: name" style="width:225px;">
ko.validation.init({insertMessages: true});
var vm = {
    name: ko.observable('name').extend({required: { message: "Please enter a username.", params: true }, email: { message: "Username should be in a valid email address format which is used.", params: true }})
}
ko.applyBindings(vm);

我的代码在http://jsfiddle.net/Td7zZ/2/

Answer 1

如果您想更改DOM，那么我们将拥有一个固定的width容器，而不是float input以及JS生成的{{} 1}}到span，并为他们分配一个固定的left，或者你可以width将他们分配到float和left以及

Demo

Demo 2 （浮动right和left）

Demo 3 多个right元素嵌套在input和ul下，并自行清除li

li

注意：如果您有多个div { width: 500px; border: 1px solid #f00; overflow: hidden; } .form-control, .form-control + span { float: left; } .form-control { width: 200px; } .form-control + span { width: 270px; } 字段，请使用input和ul元素，并确保li之后clear float

Answer 2

将css添加到您的输入中，如：

input, .form-control {
    float: left;
    margin: 0 5px 0 0;
    width: 225px;
}

Answer 3

需要将css绑定到将应用于所有标记的div中。像这样的东西

<div data-bind="attr: { class: 'wrap'}" > 

  <input id="personName" class="form-control placeholder has-error" type="text" 
    data-bind="  value: name " style="width:225px;"  />

</div>

这是css ..

  .wrap {
    width:500px;
    display:inline-block;
    border:1px solid blue;
  }

Fiddle Demo