我在将图标固定在输入字段的右上角以进行响应时遇到问题。我希望能够使其适应各种屏幕尺寸。我目前有以下代码:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href=" https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<form class="form-class">
<div class="form-group">
<label>
<i class="fa fa-exclamation-circle" aria-hidden="true"></i>
<span>Username</span>
</label>
<input type="text" class="form-control" name="name" placeholder="Username">
</div>
</form>
</head>
<body>
</body>
</html>
CSS:
.form-class input {
width: 70vw;
@media all and (min-width: 768px) {
width: 30vw;
}
@media all and (min-width: 1200px) {
width: 25vw;
}
}
.form-class label {
position: relative;
font-size: 2rem;
@media all and (min-width: 768px) {
font-size: 3rem;
}
}
.form-class label .fa-exclamation-circle {
position: absolute;
font-size: 0.7em;
color: red;
top: 28px;
left: 427px;
@media all and (min-width: 375px) {
left: 255px;
}
@media all and (min-width: 768px) {
top: 35px;
left: 295px;
}
@media all and (min-width: 1440px) {
top: 35px;
left: 350px;
}
}
上述方法效果不佳，因为我只针对非常具体的屏幕尺寸。在这里使用绝对定位是正确的方法还是有更好的方法？我如何使感叹号图标在所有屏幕尺寸上都能响应？
可在此处找到现场演示:https://jsbin.com/kixiliduju/1/edit?html,css,output
最佳答案
你的意思是添加一些看起来像搜索框上的清除按钮的东西？所以你可以试试这个 How do I clear a search box with an 'x' in bootstrap 3?
关于html - 如何使输入字段顶部的图标响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44273840/