我的 里面有一个图像图标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>
在表格单元格中,默认垂直对齐方式为居中,您可以通过添加以下内容来重置它:
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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句