jquery - 当 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，以便我们有一个固定的宽度容器，然后我们将 float 输入 以及 JS 生成的 span 到 left，并会为它们分配一个固定的 width 或者你可以 float > 它们也位于左侧和右侧

Demo

Demo 2 ( float 左和右)

Demo 3 多个 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 每个li之后的float