我需要把這個標籤放在/或者在文本框旁邊。請有任何想法嗎？

Question

我有下面的代碼，現在我卡在如何把標籤中/下一個文本框給予1元的看法，請：

HTML

<div style="position: relative; float: left; margin-left: 12px;"> 
    <input type="text" class="theInput" /> 
    <label class="theLabel">$ &nbsp; |</label> 
</div> 

CSS

.theInput { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    text-overflow: ellipsis; 
    color: #333333; 
    outline: none; 
    border: 1px solid #E4EBED; 
    border-radius: 3px; 
    width: 70px; 
    height: 32px; 
    line-height: 25px; 
    font-size: 16px; 
    vertical-align: middle; 
    background-color: #fff; 
    padding-left:45px; 

} 


.theLabel { 
    position:absolute; 
    z-index:999; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    color: #333333; 
    outline: none; 
    width: 34px; 
    height: 32px; 
    line-height: 30px; 
    font-size: 20px; 
    background-color: #fff; 
    margin-left:-106px; 
    font-weight: bold; 
    cursor:default; 
} 

這是希望的：final result

Answer 1

你可以這樣做（調整您的需要）：

CSS

.theInput { 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    text-overflow: ellipsis; 
    color: #333333; 
    outline: none; 
    border: 1px solid #E4EBED; 
    border-radius: 0px 3px 3px 0px; 
    width: 70px; 
    height: 32px; 
    line-height: 25px; 
    font-size: 16px; 
    vertical-align: middle; 
    background-color: #fff; 
    padding-left:45px; 
    display: inline-block; 
    border-top: solid 1px #ccc; 
    border-right: solid 1px #ccc; 
    border-left: none; 
    border-bottom: solid 1px #ccc; 
} 
.theLabel { 
    position:relative; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    color: #333333; 
    outline: none; 
    width: 34px; 
    height: 34px; 
    line-height: 40px; 
    font-size: 20px; 
    background-color: #fff; 
    font-weight: bold; 
    cursor:default; 
    float: left; 
    display: inline-block; 
    vertical-align: middle; 
    border-top: solid 1px #ccc; 
    border-left: solid 1px #ccc; 
    border-bottom: solid 1px #ccc; 
} 

DEMO HERE

Answer 2

這裏舉例：

http://jsfiddle.net/d5ca4z88/

您應該使用標籤標籤l IKE這樣：

<label>Label Name: <input type="text" class="theInput"></label> 

Answer 3

試試這個https://jsfiddle.net/u5j9xq4x/

HTML

<div style="position: relative; float: left; margin-left: 12px;"> 
    <div class="price"> 
     <label class="theLabel">&euro;</label> 
     <input type="text" class="theInput" value="000"> 
    </div> 
</div> 

CSS

.theInput { 
    border: none; 
    padding: 5px 10px; 
    max-width: 70px; 
} 

.price { 
    border: 3px solid #333333; 
} 

.theLabel { 
    padding: 0 10px; 
    border-right: 1px solid black; 
}