量程顯示行內塊不能正常工作

我有一個textbox和分配給它的驗證消息。我試圖將驗證消息內嵌到textbox，但它正好在它下面。我嘗試了不同的選擇，但是他們都沒有工作。下面是相同的代碼：量程顯示行內塊不能正常工作

HTML

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

這裏是一個相同的Demo。

所需的輸出是：

任何幫助將不勝感激。謝謝。

來源

2016-11-28 Senjuti Mahapatra

最簡單的方法是使用CSS Flexbox的。讓你的<span>一個flex容器，而不是inline-block，就像這樣：

/* 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:focus, 
 
.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>

希望這有助於：

span { 
    display: flex; 
}

在下面的代碼片段看看吧！

來源

2016-11-28 06:30:32

它在某種程度上起作用。但在我提供的圖片中，看到我的文本框右上角有一個三角形。用你的解決方案，三角形消失。我也需要那個三角形。 –

@SenjutiMahapatra我已經更新了我的答案，請現在看看它，這將解決您的問題。只是一個小的結構變化。 –

這很好。謝謝:) –

請做如下修改：

<div class="col-lg-3 wrap"> 
    <span> 
    <input class="mandatoryText vtooltips form-control textbox validationInput" style="width: 70%; vertical-align: top; border-radius: 4px;" maxlength="100" name="tradeName" type="text"> 
    <span class="vspan" style="display: inline;">Please enter Name</span> 
    </span> 
</div>

請從這裏參閱Demo：

來源

2016-11-28 06:27:30

不，它不工作。你能提供一個有效的樣本嗎？ –

我參考了演示。但是，正如你所看到的，右上角的三角形應該放在文本框上，而不是放在它的外面。你能提供相同的嗎？ –

只需添加下面的CSS ..

span.vspan{ 
    margin-top: 5px; 
    display: flex; 
} 
.wrap span:first-child { 
     display: flex; 
}

來源

2016-11-28 06:41:10

量程顯示行內塊不能正常工作

回答

相關問題