我有一个文本框和分配给它的验证消息.我试图将验证消息内联到文本框中,但它只是在它下面.我尝试了不同的选择,但没有一个是有效的.以下是相同的代码:
<div class="col-lg-3 wrap"> <span> <input class="mandatoryText vtooltips form-control textBox validationInput" style="width: 100%; vertical-align: top; border-radius: 4px;" maxlength="100" name="TradeName" type="text"> <span class="vspan" style="display: inline-block;">Please enter Name</span> </span> </div>
CSS
input[type=text].vtooltips { position: relative; display: inline; } input[type=text].vtooltips + span.vspan { /*position: absolute;*/ display:none; font-size:12px; font-family: Arial; color:white; border-radius:3px; background: #DC000C; width:50%; border: 1px solid #6D6D6D; line-height: 0px; text-align: center; /*visibility: hidden;*/ border-radius: 4px; Box-shadow: 2px 2px 0px #AFB1B1; margin-left:5px; line-height:15px; } .validationInput,.validationInput:focus,.validationInput:hover { background-color: #FFFFE0!important; border: 1px solid red!important; height: 20px } .wrap span:first-child { display: inline-block; position: relative; overflow: hidden; width: 100% } .wrap span:first-child:after { content: ''; position: absolute; top: -5px; right: -5px; width: 0; height: 0; border-width: 5px; border-color: red; border-style: solid; transform: rotate(45deg); Box-shadow: 0 0 0 1px #FFFFE0 }
所需的输出是:
任何帮助将不胜感激.谢谢.
解决方法
最简单的方法是使用CSS FlexBox.让你的< span>一个flex容器而不是inline-block,就像这样:
span { display: flex; }
看看下面的代码:
/* CSS used here will be applied after bootstrap.css */ input[type=text].vtooltips { position: relative; display: inline; height: 20px; } .vspan { /*position: absolute;*/ display:none; font-size:12px; font-family: Arial; color:white; border-radius:3px; background: #DC000C; width:50%; height: 20px; border: 1px solid #6D6D6D; line-height: 0px; text-align: center; /*visibility: hidden;*/ border-radius: 4px; Box-shadow: 2px 2px 0px #AFB1B1; margin-left:5px; line-height:15px; } .validationInput,.validationInput:hover { background-color: #FFFFE0!important; border: 1px solid red!important; height: 20px } .wrap span:first-child { display: flex; position: relative; overflow: hidden; width: 100% } .wrap span:first-child .input-holder:after { content: ''; position: absolute; top: -5px; right: -5px; width: 0; height: 0; border-width: 5px; border-color: red; border-style: solid; transform: rotate(45deg); Box-shadow: 0 0 0 1px #FFFFE0 } body { margin: 30px; }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="col-lg-3 wrap"> <span> <span class="input-holder"> <input type="text" class="mandatoryText vtooltips form-control textBox validationInput" style="width: 100%; vertical-align: top; border-radius: 4px;" maxlength="100" name="TradeName"></span> <span class="vspan" style="display: inline-block;">Please enter Name</span> </span> </div>
希望这可以帮助!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。