html – 跨度显示内联块无法正常工作

概述我有一个文本框和分配给它的验证消息.我试图将验证消息内联到文本框中,但它只是在它下面.我尝试了不同的选择,但没有一个是有效的.以下是相同的代码： HTML <div class="col-lg-3 wrap"> <span> <input class="mandatoryText vtooltips form-control textbox validationInput" style 我有一个文本框和分配给它的验证消息.我试图将验证消息内联到文本框中,但它只是在它下面.我尝试了不同的选择,但没有一个是有效的.以下是相同的代码：

HTML

<div >  <span>    <input   maxlength="100" name="Tradename" type="text">    <span  >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}

这是一个相同的Demo.

所需的输出是：

任何帮助将不胜感激.谢谢.

解决方法 最简单的方法是使用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 >  <span>    <span >    <input type="text"   maxlength="100" name="Tradename"></span>    <span  >Please enter name</span>   </span></div>

希望这可以帮助！

总结

以上是内存溢出为你收集整理的html – 跨度显示内联块无法正常工作全部内容，希望文章能够帮你解决html – 跨度显示内联块无法正常工作所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。