爲什麼字幕不會顯示在引導文本框中？

-1

我在引導新的希望在文本框中使用Glyphicons爲此目的編寫代碼：
爲什麼字幕不會顯示在引導文本框中？

<div class="inner-addon left-addon"> 
    <i class="glyphicon glyphicon-user"></i> 
    <input type="text" class="form-control" /> 
</div>

但告訴我這一點：

我該怎麼讓Glyphicons進入文本框不是出於此？謝謝。

來源

2016-12-08 behzad

-1

只要檢查該代碼..

<div class="inner-addon left-addon"> 
    <i class="glyphicon glyphicon-user"></i> 
    <input type="text" class="form-control" /> 
</div

CSS

/* enable absolute positioning */ 
.inner-addon { 
    position: relative; 
} 

/* style icon */ 
.inner-addon .glyphicon { 
    position: absolute; 
    padding: 10px; 
    pointer-events: none; 
} 

/* align icon */ 
.left-addon .glyphicon { left: 0px;} 
.right-addon .glyphicon { right: 0px;} 

/* add padding */ 
.left-addon input { padding-left: 30px; } 
.right-addon input { padding-right: 30px; }

來源

2016-12-08 17:29:12

我的代碼爲100％me..just工作檢查這個.. –

所以不顯示爲文本 – behzad

現在的工作的感謝！我的朋友 – behzad

你真的不能，但你可以種假像這樣：

<div style="border: 1px solid #DDD;"> 
<i class="glyphicon glyphicon-user" ></i> 
    <input style="border: none;"/> 
</div>

短答案是，因爲你不能把實際的圖標放在輸入內的「value」屬性裏面，你不能把圖標放在那裏。但這種方式在視覺上看起來與用戶相似。

來源

2016-12-08 17:30:14

設置position: absolute;和家長divrelative：

.inner-addon { 
 
    position: relative; 
 
    /* margin just for breathe from viewport */ 
 
    margin-top: 20px; 
 
} 
 

 
input { 
 
    /* give text some indent so it doesn't collapse with icon */ 
 
    text-indent: 18px; 
 
} 
 

 
.glyphicon.glyphicon-user { 
 
    position: absolute; 
 
    /* Adjust coordinates as desired */ 
 
    top: 10px; 
 
    left: 10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="inner-addon left-addon"> 
 
    <i class="glyphicon glyphicon-user"></i> 
 
    <input type="text" class="form-control" /> 
 
</div>

來源

2016-12-08 17:30:47 Syden

爲什麼字幕不會顯示在引導文本框中？

回答

相關問題