Question

我已经通过HTML和CSS创建了一个旅行页面，并且我添加了按钮以添加另一个旅行，但是在点击按钮超过5次后，表单越过了区域。似乎问题来自风格，但我无法弄清楚。

＆＃13;

<div class="form-row">
   <button class="btn btn-primary" type="button" onclick="displayResult()">Add another trip</button>
</div>

＆＃13;

Answer 1

你在css中有这个：

.my-icon:after {        
    font-family: 'my-custom-icon';
    content: 'A';
    z-index: -1;
}

此处.form-row { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -5px; margin-left: -5px; }会在每次创建元素时将内容移至左侧，然后更改margin-left: -5px margin-left：0px`。

更改Css后，您的CSS将如下所示

margin-left: -5px' to

Answer 2

检查 JSFiddle 并找到问题所在。你必须在你的CSS中添加以下类。

form .form-row{margin-left: 0;}

Answer 3

当点击“添加另一个旅行”时，您似乎添加新表单部分的方式是错误的。您为插入新表单部分而放置的<div class="form-new" id="space"></div>元素位于上一个<div class="form-row"></div>内。你不应该把它放在那里，而是放在它之后。试着用这个例子来理解。

这就是你现在所拥有的。

<div class="form-row"></div>
<div class="form-row"></div>
<div class="form-row">
   <div class="form-new" id="space"></div>
</div>

尝试这样做，

<div class="form-row"></div>
<div class="form-row"></div>
<div class="form-row"></div>
<div class="form-new" id="space"></div>

样式与我的HTML代码相矛盾

3 个答案: