html - 如何在 td 中定位此微调器

Question

我想这样做(见图片)-

我暂时有这个-

我的 html 代码是-

<td data-sort-initial="true" data-value="azerty" style="padding:5px;">
    <input class="form-control input-sm edit2" data-nom_champ="contact_label" data-id_ecole_contact="9" name="contact_label" type="text" value="azerty">
    <i class="fa fa-spinner fa-spin" id="waiting_9" style="display:none;position:relative;left:0px;top:2px;"></i>
</td>

我可以修改 top 和 left 的值，但这是正确的方法吗？是因为我在 td 元素中 ma 它不起作用吗？我应该放置一个 div 吗？

谢谢你的帮助

多米尼克

Answer 1

只需将td样式设置为

position: relative;

并更改为 i 样式:

position: absolute; right: 6px; top: 4px;

最终代码如下所示:

<table>
    <tr>
        <td style="position:relative">
          <input type="text"/>
          <i class="fa fa-spinner fa-spin" id="waiting_9" style="display:none;position: absolute; right: 6px; top: 4px;"></i>
        </td>
    </tr>
</table>

fiddle : https://jsfiddle.net/d1xasmLd/9/