如何使标签文本显示在无线电输入上?



由于某些原因,当我尝试做label>时,你每周玩多少次?<label就在我的无线电输入上方,标签上的文本没有显示出来。当我在任何其他地方尝试时,比如在无线电输入的末端,它都能工作。它只是在无线电输入之前不起作用。

.bcontainer {
height: 800px;
width: 550px;
background-color: rgba(245, 245, 220, .95);
margin-left: auto;
margin-right: auto;
border-radius: 5px;
margin-bottom: 15px;
margin-top: 15px;
border: 2.5px solid black;
}
label {
display: block;
margin: 15px;
color: black;
font-family: verdana;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
}
input {
width: 100%;
margin-top: 10px;
color: white;
background-color: black;
border: 1px solid black;
min-height: 2em;
}

}
.align {
vertical-align: middle;
width: unset;
margin: 0 10px 0 0;
}
<div class="hcontainer">
<h1 id="title">Game Type Survey</h1>
<p id="description"><em>Thank you for your response!</em></p>
</div>
<div class="bcontainer">
<form id="survey-form" action="https://register-demo.freecodecamp.org">
<fieldset>
<label id="name-label">Username: <input type="text" name="username" id="name" placeholder="username" required>
</label>
<label id="email-label">Email: <input id="email" type="email" name="address" placeholder="email" required>
</label>
<label id="number-label">Age: <input id="number" type="number" min="21" max="120" name="age" placeholder="21">
</label>
<label>Which Wallet Do You Use? <select name="wallet" id="dropdown" required>
<option value="">Select Wallet</option>
<option value="1">MetaMask</option>
<option value="2">Coinbase</option>
<option value="3">Wallet Connect</option>
</fieldset>
<fieldset>
<label>How Many Times do you Play Per Week?</label>
<label><input type="radio" name="#oftimes" class="align" value="1">0-1</label>
<label><input type="radio" name="#oftimes" class="align" value="2">2-7</label>
<label><input type="radio" name="#oftimes" class="align" value="3">8+</label>

您之前没有关闭<label><select>元素。关闭它们,它应该可以工作了,像这样:

<label>Which Wallet Do You Use?</label>
<select name="wallet" id="dropdown" required>
<option value="">Select Wallet</option>
<option value="1">MetaMask</option>
<option value="2">Coinbase</option>
<option value="3">Wallet Connect</option>
</select>

我建议找出如何在你选择的代码编辑器上"自动缩进",或者养成保持完美缩进的习惯,因为当代码正确缩进时,像这样的问题真的很容易发现和避免:)它也使一切更整洁,更容易处理!

最新更新