HTML 表单，在 div 中没有响应

Question

我正在创建一个网页，如果我将我的 div 放在一个表单中，它会使其无响应，但如果我将相同的表单放在 div 之外，一切正常.

我想要一个名为 container-2 的 div 和 2 个表格，一个在左边，如您所见，另一个是卡支付方式。如果我尝试调整屏幕大小，第二种形式会出现在第一种形式之下，因为我已经设置了 flex-wrap:wrap;但第一个表单保持无响应。

这是代码，在此先感谢。

<div class="container-2">
    <form method="POST">-
        <div class="item" id="payment">
            <div class="row">
                <h4>Možnost nakupa 1: Plačilo po povzetju <small><i>(Za plačevanje s kartico je treba izbrati samo
                            količino in vrsto izdelka!)</i></small></h4>
                {% csrf_token %}
                {% if form %}
                <div class="input-group">
                    <div style="color: red;">{{ form.name.errors }}</div>
                    {{ form.name }}
                </div>
                <div class="input-group">
                    <div style="color: red;">{{ form.last_name.errors }}</div>
                    {{ form.last_name }}
                </div>
                <div class="input-group">
                    <div style="color: red;">{{ form.street_name.errors }}</div>
                    {{ form.street_name }}
                </div>
                <div class="input-group">
                    <div style="color: red;">{{ form.city_name.errors }}</div>
                    {{ form.city_name }}
                </div>
                <div class="input-group">
                    <div style="color: red;">{{ form.email.errors }}</div>
                    {{ form.email }}
                </div>
                <div class="input-group">
                    <div style="color: red;">{{ form.number.errors }}</div>
                    {{ form.number }}
                </div>
                {% endif %}

            </div>
        </div>
        <div class="item">
            <div class="row">

                <div class="input-group">
                    {{ form.num_elements.errors }}
                    {{ form.num_elements }}
                </div>
                <div class="input-group" id="check_div">
                    <div
                        style="display: flex;width:100%;justify-content: space-between;align-items: center;font-size:medium;flex-wrap: wrap;">
                        <div style="display: flex;justify-content: space-between;margin:3px;">
                            {{ form.select_type.errors }}
                            {{ form.select_type.label_tag }}
                            {{ form.select_type }}
                        </div>

                        <div style="display: flex;justify-content: space-between;margin:3px;">
                            {{ form.select_type2.errors }}
                            {{ form.select_type2.label_tag }}
                            {{ form.select_type2 }}
                        </div>

                    </div>
                </div>
                <div class="input-group">
                    {{ form.warning_el.errors }}
                    {{ form.warning_el }}
                </div>
                <div style="display: flex;justify-content: space-between;margin: 0.5rem;">
                    <button class="button" type="submit" id="button"> Naroči <small>(povzetje)</small></button>
                    <a class="button" id="stripe-button">Plačaj s kartico!</a>
                </div>
            </div>
        </div>
    </form>
    <div>
        <form id="payment-form" data-locale="si">
            <div id="payment-element">
                <!--Stripe.js injects the Payment Element-->
            </div>
            <button id="submit" class="button1">
                <div class="spinner hidden" id="spinner"></div>
                <span id="button-text">Pay now</span>
            </button>
            <div id="payment-message" class="hidden"></div>
        </form>
    </div>
</div>

这是容器 2。

Answer 1

您可以在表单属性中添加 100% css:

#payment {
  width: 100%;
}

HTML 表单，在 div 中没有响应

HTML form , not responsive while inside a div

html

css

django

responsive-design

web