如何設置左側復選框的label？

Question

這個有注冊表單的頁面必須像第一張圖片一樣對齊。 如果我不添加 CSS，那么我可以獲得復選框左側的 label（通過將 label 標簽放在輸入標簽下）。 一旦我開始添加 CSS 然后它總是回到左邊。 我還嘗試將類添加到我放在所有輸入元素周圍的 div，但這讓一切變得更糟。 希望有人能為我闡明這個問題？

設計應該是這樣的：

這是我到目前為止所得到的：

HTML：

<!DOCTYPE html>
<html lang="nl">

<head>
    <meta charset="UTF-8">
    <title>Pinkpop 2021 | 18 &#8211; 19 &#8211; 20 juni 2021</title>
    <link rel="stylesheet" href="global.css">
</head>

<body>
<div>

    <table>
        <tr>
            <td><img src="../images/logo.png" alt=logo width="400" style="padding: 10px;"></td>
            <td style="text-align: center; vertical-align: middle;">
                <div class="niewsbrief">Nieuwsbrief</div>
            </td>
        </tr>
    </table>

    <h2>Schrijf je hier in voor onze nieuwsbrief</h2>

    <form>
        <div>
            <label for="E-mail">E-mail:</label>
            <input type="email" name="E-mail:" id="E-mail" required>
        </div>
        <div>
            <label for="frequentie">Frequentie:</label>
            <select id="frequentie" name="frequentie">
                <option value="Maandelijks">Maandelijks</option>
                <option value="Kwartaal">Kwartaal</option>
                <option value="Jaarlijks">Jaarlijks</option>
            </select>
        </div>
        <div>
            <input type="checkbox" id="checkbox" name="Privacy">
            <label id="checkboxes" for="checkbox">Ik accepteer de privacy voorwaarden voor de registratie van mijn e-mailadres</label>
        </div>
        <div>
            <input type="submit" value="Registreer" >
        </div>
    </form>
    <hr>
    <span>Aan informatie op deze site kunnen geen rechten worden ontleend.</span><br>
    <span> &copy; Buro Pinkpop, Geleen</span>
</div>
    <script src="tickets.js"></script>
</body>
</html>

CSS：

.niewsbrief {
    color: #ec008c;
    font-size: 300%;
    font-weight: bolder;
}

form {
    color: #ffd205;
    font-size: 120%;
}

label {
    float:left;
    width: 100px;
    text-align: left;
    padding-right: 5px;
    margin-top: 12px;
    clear: left;
}

input {
    margin-top: 15px;
}

Answer 1

將您的 label 包裹在您的輸入周圍，然后它將在沒有額外的 css 的情況下工作。

但主要問題是浮動。 您必須仔細決定要浮動什么以及何時重置您的浮動。

更多信息：關於花車的一切 CSS 技巧

 <div class="control"> <label> <input type="checkbox"> Hello World </label> </div>

Answer 2

一項建議是：

避免在 label 上浮動
為所有 label 提供相同的大小（ display: inline-block和width ）
覆蓋復選框 label 的顯示屬性，讓它放在復選框之后

 .niewsbrief { color: #ec008c; font-size: 300%; font-weight: bolder; } form { color: #ffd205; font-size: 120%; } input { margin-top: 15px; } label { width: 20%; display: inline-block; }.alinea-left, #register { margin-left: 20%; }.alinea-left label { display: initial; }

 <;DOCTYPE html> <html lang="nl"> <head> <meta charset="UTF-8"> <title>Pinkpop 2021 | 18 &#8211; 19 &#8211. 20 juni 2021</title> <link rel="stylesheet" href="global.css"> </head> <body> <div> <table> <tr> <td><img src="../images/logo:png" alt=logo width="400" style="padding; 10px:"></td> <td style="text-align; center: vertical-align; middle:"> <div class="niewsbrief">Nieuwsbrief</div> </td> </tr> </table> <h2>Schrijf je hier in voor onze nieuwsbrief</h2> <form> <div> <label for="E-mail">E-mail:</label> <input type="email" name="E-mail:" id="E-mail" required> </div> <div> <label for="frequentie">Frequentie.</label> <select id="frequentie" name="frequentie"> <option value="Maandelijks">Maandelijks</option> <option value="Kwartaal">Kwartaal</option> <option value="Jaarlijks">Jaarlijks</option> </select> </div> <div class="alinea-left"> <input type="checkbox" id="checkbox" name="Privacy"> <label id="checkboxes" for="checkbox">Ik accepteer de privacy voorwaarden voor de registratie van mijn e-mailadres</label> </div> <div> <input id="register" type="submit" value="Registreer"> </div> </form> <hr> <span>Aan informatie op deze site kunnen geen rechten worden ontleend;</span><br> <span> &copy, Buro Pinkpop. Geleen</span> </div> <script src="tickets.js"></script> </body> </html>

Answer 3

更改此標簽（ <label id="checkboxes" for="checkbox">Ik accepteer de privacy voorwaarden voor de registratie van mijn e-mailadres</label> ）

跨度 ( <span id="checkboxes" for="checkbox">Ik accepteer de privacy voorwaarden voor de registratie van mijn e-mailadres</span> )

如何設置左側復選框的label？

問題描述

3 個解決方案

解決方案1
0 2022-03-16 08:42:07

解決方案2
0 已采納 2022-03-16 08:59:40

解決方案3
0 2022-03-16 09:07:12

如何設置左側復選框的label？

問題描述

3 個解決方案

解決方案1 0 2022-03-16 08:42:07

解決方案2 0 已采納 2022-03-16 08:59:40

解決方案3 0 2022-03-16 09:07:12

解決方案1
0 2022-03-16 08:42:07

解決方案2
0 已采納 2022-03-16 08:59:40

解決方案3
0 2022-03-16 09:07:12