Question

这似乎是我缺少了一些超级简单的东西，但是我不能为了这个想办法。

我将<form>包裹在<div class="form">内，由于某种原因，在浏览器中，表单和div的高度均为0，所有内容均溢出。当我从浏览器检查文档时，浏览器无法识别此div或表单。

这里是问题区域：

此外，您也可以在此网站上查看它：Web page


<div class="form">
    <form>
            <div class="contact">
                <label for="first">First Name:</label>
                <input id="first" type="text" placeholder="First Name"><br>   

                <label for="last">Last Name:</label>
                <input id="last" type="text" placeholder="Last Name"><br>

                <label for="tel">Phone Number:</label> 
                <input id="tel" type="tel" placeholder="(###) ###-####"><br>

                <label for="email">Email:</label>
                <input id="email" type="email">
            </div>



            <div class="address">
                <label for="address-1">Address</label>
                <input id="address-1" type="text" placeholder="Address Line 1"><br>   

                <label for="address-2">Address, Line 2</label>
                <input id="address-2" type="text" placeholder="Address Line 2"><br>

                <label for="city">City:</label>
                <input id="city" type="text" placeholder="City"><br>

                <label for="state">State:</label>
                    <select id="state">
                        <optgroup>
                        </optgroup>
                    </select></br>

                <label for="zip">Zip Code:</label>
                <input id="zip" type="text" placeholder="01234">
            </div>
        </form>

    </div>

Answer 1

您是否谈论div和表单包含height:0并且内容溢出？

如果是，是因为内容div具有float css属性。为此，您必须在内容div的末尾添加样式clear:both

<div class="form">
    <form>
        <div class="contact">
          ...
        </div>

        <div class="address">
           ...
        </div>
        <div style="clear:both"></div>
    </form>
</div>

为什么浏览器无法识别我的HTML元素和表单？

1 个答案: