javascript - 使表单响应到 div

Question

我正在尝试使表单响应并将其加载到 div 中，以便表单采用 div 的形状而不会过度 float 。我已将 row-fluid 应用于表单元素和 div，但它仍然没有响应，如图所示

var div_container = document.getElementById('active-container');
                var users = '';
                var formy = '';
                for (var i = 0; i < json.length; i++) {
                    users += '<span style="font-size:27px;"><strong>' + json[i].email + '</strong></span><br/>' + '<form class="row-fluid" style="margin-top:0px;" method="post" action="search"><input class="row-fluid" type="text" value="'+json[i].access+'" name="searchName" id="searchName" readonly/><button class="btn btn-success" type="submit"><i class="icon-circle-arrow-right icon-large"></i>FETCH</button></form>' + '<hr>';
                 }

编辑:这是包含表单标签的 div

<div style="overflow: auto; overflow-x: auto; height:420px; color:#4b4f54; font-size:13px;" id="active-container">
        </div>

请问如何将响应放入 div 并将按钮附加到输入类型的右侧

Answer 1

为什么不用这么简单的东西。无需 JS。

更新:添加了内联样式。您还可以在内联样式中按 % 进行调整，我发现这很有用。

标记

<div class="container">
<h2>Form name</h2>
    <form>
        <div class="form-group">
            <input style="display:inline; width:75%" type="email" class="form-control" id="email" placeholder="Enter email">
            <button style="width:24%"type="submit" class="btn btn-success pull-right">Fetch</button>
        </div>
    </form>
</div>

CSS:根据需要调整最大宽度或完全删除。

.container {
  margin: 20px;
  padding: 10px 10px;
  max-width: 500px;
  background: #FDFDFD;
  box-shadow: 2px 2px #D8D8D8;
}

JsFiddle Demo

Float left Demo