<td> 内的 <div> 中包含多个文本输入

Posted 2023-04-18

【中文标题】<td> 内的 <div> 中包含多个文本输入

【英文标题】：Multiple text inputs wrapped in <div> within <td>

【发布时间】：2018-10-07 07:08:16

【问题描述】：

<td>
<form>
    <div class="pull-left" style="margin-top: 30px;">
        <input name="searchInput" tabindex="0" class="form-control input-sm" id="simple-field" style="min-width: 162px; max-width: 162px;" type="text" placeholder="Enter CI" value="" label="hid">
    </div>
<br>
<br>
    <div class="pull-left" style="margin-top: 30px;">
        <input name="searchInput" tabindex="0" class="margin-5-top form-control input-sm" id="simple-field" style="min-width: 162px; max-width: 162px;" type="text" placeholder="Enter CI" value="" label="hid">
    </div>
<br><br>
    <div class="pull-left" style="margin-top: 30px;">
        <input name="searchInput" tabindex="0" class="margin-5-top form-control input-sm" id="simple-field" style="min-width: 162px; max-width: 162px;" type="text" placeholder="Enter CI" value="" label="hid">
    </div>
<br><br>
</form>
<span style="color: rgb(174, 88, 86);">
</span>
</td>

这会导致 IE 11 中的以下呈现： 我的问题是如何正确显示？文本形式应该相互堆叠，而不是对角排列（红色箭头），而是水平排列。

任何帮助将不胜感激。 顺便说一句，这在 Chrome 中运行良好。

【问题讨论】：

你也需要清除 left（如果 pull left 向左浮动）或者只是删除 pull left 类 - 我不明白你为什么需要它

你还需要 pull-left 类吗？ css 中有什么，如果删除类会发生什么？

我认为拉左是让我的布局出错的原因。我删除了它，但它没有按预期工作！最初它是为了帮助将输入定向到左侧，当我使用 div 布局时，但自从我更改为基于表格的布局后，这绝对是不必要的。

感谢您的协助！如果你好奇的话，pull-left 来自 react-bootstrap 顺便说一句

【参考方案1】：

从所有这些 divs 中删除 pull-left 类应该可以解决您的问题（如果您没有任何其他导致您未发布的行为的代码）

（您可能也不需要这些br 标签）