javascript - 在输入框上叠加图标

Question

我试图在我的灰色文本框上覆盖 x 图标，同时保持它的 100% 宽度。这可能吗？如果是这样，怎么办？直到这个阶段，我所能做的就是在灰色文本框的宽度为 90% 时让它工作。

HTML

<div class="container" id="waypoints-page">
    <div id="waypoints">
        <div class="waypoint-container">
            <input type="text" class="form-control booking waypoint" placeholder="Via" id="first-waypoint">
            <label><i class="fa fa-times" id="clear-waypoint-button"></i></label>
            <hr>
        </div>
    </div>
</div>

CSS

.booking {
    outline: none;
    border: none;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    background-color: #ccc;
}
input.form-control.booking, .twitter-typeahead {
    width:100%;
    display: inline-block;
}
.tt-dropdown-menu {
    padding: 1em;
    background-color: #ccc;
    width: 100%;

Fiddle here

Answer 1

嗯，你可以绝对定位。

.container {
    position: relative;
}
.fa {
    position:absolute;
    top: 8px;
    right: 25px
}

参见 Fiddle.