1

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

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

Case-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;
}

在此处输入图像描述

4

1 回答 1

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;}

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

于 2013-08-15T15:22:19.027 回答