0

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

4

2 回答 2

0

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

将 CSS 显示值设置为 block，这样所有输入都将像 div 一样，并自动相互下方：

input
{
    display: block;
}

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

于 2014-09-14T10:15:59.580 回答
0

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

form label { display: block; }

并在控制台中查看是否可行

于 2014-09-14T10:16:10.790 回答