0

我不知道是我做错了还是它无法做到，但我无法在 Chrome/Safari 中得到我所期望的，但 Firefox、Opera 和 IE 做得很好。这是重点。

我有一个带有某种字段的表单，分为 div 和一个按钮以将最后 2 个元素再次添加到表单中。如果您愿意，忘记它是一个表单及其在通过 PHP 处理信息时可能出现的问题，让我们专注于我遇到的标记问题。

这是原始的 HTML 代码：

<div id="insert_group_work" class="insert_group form-group">
    <label class="col-sm-12 col-md-12 col-lg-12">Datos del obra</label>
    <input type="text" id="obra_nombre" class="form-control insert_group6" name="obra_nombre-1" placeholder="Nombre de la obra"/>
    <select id="select_composiciones" name="select_composiciones-1" class="form-control insert_group6">
        <option value="">Elige una tipo de composición</option>
        <option value="1">Viola solista</option>
        <option value="2">Música de cámara</option>
        <option value="3">Orquesta</option>
        <option value="4">Concierto</option>
    </select>
</div>
<button id="add_button" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span></button>

这是CSS类：

.insert_group6 { width:48.5%; margin-right:3%; float:left;}

这是 jQuery 脚本：

function addField() {
 var nuevaObra='<input type="text" id="obra_nombre'+numObra+'" class="form-control insert_group6" name="obra_nombre-'+numObra+'" placeholder="Nombre de la obra"/>';
 nuevaObra+='<select id="select_composiciones'+numObra+'" name="select_composiciones-'+numObra+'" class="form-control insert_group6">';
 nuevaObra+='<option value="">Elige una tipo de composición</option>';
 nuevaObra+='<option value="1">Viola solista</option>';
 nuevaObra+='<option value="2">Música de cámara</option>';
 nuevaObra+='<option value="3">Orquesta</option>'
 nuevaObra+='<option value="4">Concierto</option></select>';
 numObra++;
 $('#insert_group_work').append(nuevaObra);
}

nuevaObra 是带有要附加的 HTML 标记的变量，并按行分隔以使用它。

我使用 Bootstrap 进行标记只是为了学习使用它，但我需要修改一些属性以适应我的个人情况。这就是为什么我使用 .insert_group6 类来修改宽度、边距和浮动它们以使每行有 2 个字段。

在我的测试中，问题来自浮动通过 jQuery 添加的第一个元素。

正常使用）通过 jQuery 添加的两个元素在我的 CSS 类上都有 float:left 属性。结果 - 添加的新元素不可见，但以错误的度量和位置添加到 DOM，在具有负面度量的父 div 的顶部。

测试1）手动添加两个重复代码的字段。结果 - 一切似乎都很好，所有元素都已正确创建。

测试 2）通过 jQuery 添加元素，但第一个元素有一个没有浮点数的类。结果字段已绘制，但显然第一个字段不会浮动，因此存在列中。

测试 3) 添加的两个元素都激活了 float:left 属性，并通过 Google 开发人员取消选中并再次检查该属性。结果 - 起初元素定义不明确，当未选中 float_left 时，它们出现在列中，当我再次检查时，它们在创建的 HTML 中定位良好。

测试 4) 添加不带浮动的元素，然后通过 Google Developer 添加属性。结果 - 它们位于一列中，但是当我在 GD 中手动添加属性时，它们会重新定位到正确的位置。

我希望你能理解这个问题。

非常感谢。

4

0 回答 0