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

Question

嗨，我希望为html页面设计CSS，下面是m问题。我有两个文本框并排放在一个内联容器中。

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

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

情况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

这是我创建的小提琴 - > 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;}

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