HTML 5 输入字段不会显示在下方答案

【问题标题】：HTML 5 input fields won't show beneathHTML 5 输入字段不会显示在下方
【发布时间】：2014-09-14 10:10:57
【问题描述】：

我有一个简单的问题。我需要构建一个只有 HTML 5 的简单表单。我已经构建了一些东西，但是所有输入字段都没有显示在彼此下方。他们站在一起。我已经尝试了多种方法，但它们不会相互排斥。

你们能帮帮我吗？这是我的代码：

<head>
    <meta charset="utf-8">
    <meta name="author" content="-" />
    <title>Frontend Development</title>
</head>

<body>
    <section>
        <h1>Aanmelden</h1>
        Bent u geïnteresseerd in samenwerken met CMD Amsterdam? Dat kan!
        Tijdens de opleiding werken studenten aan projecten voor echte opdrachtgevers. Ook lopen de studenten stage, in het tweede en afstudeerjaar. 
        CMD Amsterdam zoekt altijd naar positieve verbindingen met de creatieve stad Amsterdam.Voor het aanmelden van stageplekken of projecten kunt u onderstaand formulier invullen Wij nemen zo nodig contact met u op nadat het formulier is verstuurd. Voor vragen of opmerkingen kunt u contact met ons op.
    </section>

    <form>
        <fieldset>
            <legend>Contactgegevens</legend>
            <label for="Naam">Naam</label>
            <input id="Naam" type="text"/>

            <label for="Bedrijf">Bedrijf</label>
            <input id="Bedrijf" type="text"/>

            <label for="Adres">Adres</label>
            <input id="Adres" type="text"/>

            <label for="Postcode">Postcode</label>
            <input id="Postcode" type="text" placeholder="Bijvoorbeeld: 1701JB"/>

            <label for="Plaats">Plaats</label>
            <input id="Plaats" type="text"/>

            <label for="Telefoon">Telefoon</label>
            <input id="Telefoon" type="text"/>

            <label for="Email">Email</label>
            <input id="Email" type="text"/>

            <h4>Ik wil mijn aanmelden:</h4>
            <label for="Project">Voor een project</label>
            <input for="Project" type="checkbox"/>

            <label for="Stage">Als stagebedrijf</label>
            <input for="Stage" type="checkbox"/>
        </fieldset>

</body>

【问题讨论】：

你在使用一些框架吗？引导等？

标签： html forms input-field

【解决方案1】：

这是因为未经修改，所有输入都内联显示。有两种方法可以将它们放在一起：

将 CSS 显示值设置为阻塞，这样所有输入都会像 div 一样自动向下排列：

input
{
    display: block;
}

或者您可以在每个输入标签后输入一个<br /> 标签，这会强制浏览器在新行上显示它们，第一种方法是“更干净”的方法。

【讨论】：

【解决方案2】：

在您的 CSS 中添加以下规则：

form label { display: block; }

并在控制台中查看是否有效

【讨论】：