這個有注冊表的頁面必須像第一張圖片一樣對齊。如果我不添加 CSS，那么我可以獲得復選框左側的標簽（通過將標簽標簽放在輸入標簽下）。一旦我開始添加 CSS，它就會一直回到左邊。我還嘗試將類添加到我放置在所有輸入元素周圍的 div 中，但這讓一切變得更糟。希望有人可以為我闡明這個問題嗎？
設計應該是這樣的：
這是我到目前為止所做的：
HTML：
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<title>Pinkpop 2021 | 18 – 19 – 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> © 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;
}
uj5u.com熱心網友回復：
一項建議是：
- 避免在標簽上浮動
display: inline-block為所有標簽（和width）賦予相同的大小- 覆寫復選框標簽的顯示屬性以使其放置在復選框之后
.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 – 19 – 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> © Buro Pinkpop, Geleen</span>
</div>
<script src="tickets.js"></script>
</body>
</html>uj5u.com熱心網友回復：
將您的標簽包裹在您的輸入周圍，然后它將無需額外的 css 即可作業。
但主要問題是浮動。您必須仔細決定浮動什么以及何時重置浮動。
更多資訊：關于浮動 CSS 技巧
<div class="control">
<label>
<input type="checkbox">
Hello World
</label>
</div>uj5u.com熱心網友回復：
更改此標簽 ( <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>)
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/445000.html