错误消息的 CSS 定位正好在输入文本框内联上方

Question

您好，我正在为 html 页面设计 CSS，下面是我的问题。我将两个文本框并排放在一个内联容器中。

我现在正在验证输入并希望在相应文本框的正上方显示错误消息。因此，我创建了 span 并将它们放在一个高度较小的内联容器中并考虑显示。但问题是:

案例一:如果错误消息的长度很短，则第二个文本框的验证消息会向左移动。我该如何避免这种情况？

案例 2:如果输入文本框 1 的验证消息很长，则导致文本框 2 的错误消息向右移动。在这种情况下，我希望文本框 1 的验证消息位于文本框 1 区域上方的多行中

我的 HTML:

<div class="inline-container1">
    <ul><li><span class="validationMessage"
                data-bind="validationMessage: firstName" /></li>
         <li><span class="validationMessage"
                data-bind="validationMessage: lastName" /></li>
    </ul>
</div>
<div id="name" class="inline-container">         
    <ul>
        <li> <input id="firstName"
                name="firstName" type="text" class="required-input"
                placeholder="First Name *" data-bind="value: firstName" /> 
        </li>
        <li> <input id="lastName"
                name="lastName" type="text" class="required-input"
                placeholder="Last Name *" data-bind="value: lastName" />
        </li>
    </ul>
</div>

我的 CSS:

.inline-container1 ul li{
    display: inline;
    list-style-type: none;
    padding-right: 20px;
    min-height: 10px;
    margin: 0;
    width: 230px;
}

.inline-container1 {     
}

.inline-container1 ul
{
    list-style-position: outside;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

     .validationMessage {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #F00; 
    display: inline;
}

Answer 1

这是我创建的用于帮助的 fiddle -> http://jsfiddle.net/Moje/dTvKM/
全屏 -> http://jsfiddle.net/Moje/dTvKM/embedded/result/

HTML:

<div class="ctnr">
    <span class="vMsg" data-bind="validationMessage: firstName">Val. msg for txtbox 1</span>
    <span class="vMsg" data-bind="validationMessage: lastName" >Val. msg for txtbox 2</span>
</div>
<div class="ctnr">         
    <input id="firstName" name="firstName" type="text" class="required-input" placeholder="First Name *" 
    data-bind="value: firstName" />
    <input id="lastName" name="lastName" type="text" class="required-input" placeholder="Last Name *" 
    data-bind="value: lastName" />
</div>

CSS:

body{font-family:sans;}
.ctnr > *{ display: inline-block; width: 40%;}
.vMsg{
    display:relative;
    top:-40px;
    border:1px solid red;
    color:red;
    padding:2px;
}
input[type=text]{-webkit-appearance:none;outline:none;border:none;}
#firstName{border:3px solid black;}
#lastName{border:3px solid red;}

您可以进一步调整它以满足您的需要。