我试图将 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%;
最佳答案
嗯,你可以绝对定位它。
.container {
position: relative;
}
.fa {
position:absolute;
top: 8px;
right: 25px
}
参见Fiddle.
关于javascript - 输入框上叠加图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28619092/