Question

我有一个简单的问题。我需要构建一个只有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>

Answer 1

这是因为没有修改，所有输入都显示为内联。有两种方法让它们彼此相互接触：

将CSS显示值设置为阻止，这样所有输入都将像div一样运行并自动低于对方：

input
{
    display: block;
}

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

Answer 2

在你的css中添加以下规则：

form label { display: block; }

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

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

2 个答案: