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.

输入框上的叠加图标

1 个答案: