如何在表列中添加动态元素而不影响同一列中的其他元素

Question

我有一个表格，其中列元素中包含文字。我单击一个按钮，所有文本元素都成为输入元素。根据条件，输入字段旁边会显示一个按钮。

我要做的是在输入字段旁边的同一列中显示一个带有图标的按钮。我已经这样做了，但结果并不像预期的那样。

这就是我得到的。

这就是我要找的。

<td id="id119ae">
<form class="mytemp" id="form19af" method="post" action="./Application"><div style="width:0px;height:0px;position:absolute;left:-100px;top:-100px;overflow:hidden"><input type="hidden" name="form19af_hf_0" id="form19af_hf_0"></div>

    <div style="padding:5px; border-width:0px;background-color: #ffffbb" id="editContainer19b0">
    <button style="display:none;" data-toggle="modal" data-backdrop="static" class="btn btn-default btn-xs pull-right">
        <span class="fa fa-bolt"></span>
    </button>
        <input value="Account test" name="editContainer:edit" id="edit1923">

    </div>
</form>

这是我目前拥有的代码，它为我提供了第一个结果。布局导致一些问题。我需要更好的布局建议或解决方法。

Answer 1

使用输入组类显示与输入类型
相邻的按钮 http://getbootstrap.com/components/#input-groups-buttons

Answer 2

您的请求没有唯一的解决方案。

这取决于你的设计方式？你在考虑响应能力吗？你使用固定宽度？甚至你在使用像Bootstrap这样的库或框架吗？

顺便说一下，我觉得这个适合你： 使用输入和按钮的宽度百分比。 例如：

<button style="display:none; width: 10%;" data-toggle="modal" data-backdrop="static" class="btn btn-default btn-xs pull-right">
   <span class="fa fa-bolt"></span>
</button>
<input value="Account test" style="width:80%" name="editContainer:edit" id="edit1923">

Answer 3

我所做的是设置表格的最小宽度。这个百分比没有帮助我，因为它是动态的。出于某种原因，当添加新元素并且按钮总是出现在错误的位置时，它没有考虑到这一点。

我将该列的最小宽度设置为250像素。我试图将它设置为30％，但这也不起作用。

解决方案：在标题元素中使用min-width。这将整个表设置为遵循最小宽度。