html - 我需要将我创建的标签放在文本框中/或文本框旁边。有什么想法吗？

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

示例如下:

http://jsfiddle.net/d5ca4z88/

您应该像这样使用标签标签:

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