我的input
内有一个图片图标,工作正常。
问题是该图标正在推动我的另一个input
。如您所见,淡出后,输入会回到所需位置。
这是一个CSS问题吗?我该如何解决这个问题?
$("img#input_img").fadeOut(3000);

.input-test {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
input {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
#input_img {
width: 24px;
height: 24px;
position: relative;
/* adjust as you need */
left: 190px;
bottom: 27px;
}
table {
border: 1px solid red;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<h2>table 1</h2>
<table>
<tr>
<td id="input_container">
<input type="text" class="input-test">
<img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>
<h2>table 2</h2>
<table>
<tr>
<td>
<input type="text" class="input-test">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>
&#13;
答案 0 :(得分:2)
关于我只是设置输入背景的评论的后续行动......
.input-test {
background-image: url('https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png');
background-repeat: no-repeat;
background-position: 99% 48%;
background-size: 24px 24px;
}
答案 1 :(得分:2)
基本上,您可以将图像位置设置为绝对值,以便包装器忽略图像高度。此外,您必须将包装器位置设置为相对位置,以便图像位置(底部和左侧)取决于它的包装器。 最后,只需根据需要调整图像位置。
我希望这对你有意义
编辑:为了更清楚,我只改变了这么多。
#input_img {
position: absolute;
/* adjust as you need */
left: 190px;
bottom: 4px;
}
table td {
position: relative;
}
$("img#input_img").fadeOut(3000);
&#13;
.input-test {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
input {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
#input_img {
width: 24px;
height: 24px;
position: absolute;
/* adjust as you need */
left: 190px;
bottom: 4px;
}
table {
border: 1px solid red;
}
table td {
position: relative;
}
&#13;
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<h2>table 1</h2>
<table>
<tr>
<td id="input_container">
<input type="text" class="input-test">
<img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>
<h2>table 2</h2>
<table>
<tr>
<td>
<input type="text" class="input-test">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>
&#13;
答案 2 :(得分:1)
在表格单元格中,默认垂直对齐方式为中间,您可以通过添加:
重置该对齐方式td {
vertical-align: top;
}
最好在图片上设置position: absolute;
,因此它将超出正常的内容流程,不会影响您的标准布局,也更容易控制偏移。
td {
vertical-align: top;
position: relative;
}
#input_img {
width: 24px;
height: 24px;
position: absolute;
right: 24px;
top: 2px;
}
$("img#input_img").fadeOut(3000);
.input-test {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
input {
display: block;
margin: 0 20px;
width: 200px;
height: 34px;
box-sizing: border-box;
border: 2px solid green;
border-radius: 4px;
font-size: 16px;
color: black;
padding: 12px 20px 12px 10px;
height: 20px;
padding-right: 30px;
}
#input_img {
width: 24px;
height: 24px;
position: absolute;
right: 24px;
top: 2px;
}
table {
border: 1px solid red;
}
td {
vertical-align: top;
position: relative;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<h2>table 1</h2>
<table>
<tr>
<td id="input_container">
<input type="text" class="input-test">
<img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>
<h2>table 2</h2>
<table>
<tr>
<td>
<input type="text" class="input-test">
</td>
<td>
<input type="text" class="">
</td>
</tr>
</table>
答案 3 :(得分:0)
在你的CSS中改变这应该是有效的:
#input_img {
width: 24px;
height: 24px;
position: absolute;
right: 24px;
top: 2px;
}
td {
vertical-align: top;
position: relative;
}