如何解决label标签文本无法显示在radio单选框上方的问题
问题根源
单选框上方的标签文本无法正常显示,是两处语法错误共同导致的:
- HTML结构错误:第一个
<fieldset>区块中,包裹钱包下拉选择器的<label>标签缺失闭合标签</label>。浏览器解析HTML时遇到未闭合标签,会自动将后续相邻内容划入该标签内部,直到碰到对应闭合标签为止。你写在第二个<fieldset>里的「How Many Times do you Play Per Week?」标签刚好被划入这个未闭合的label范围内,被前面的表单输入框样式异常覆盖,无法正常渲染显示。 - CSS语法错误:
input选择器的样式规则块结束后,多写了一个多余的孤立右花括号},导致后续定义的.align类样式完全失效,单选框布局也会出现错乱。
修复方法
- 补全缺失的标签闭合:在钱包选择器的
</select>标签后、第一个</fieldset>标签前,补上缺失的</label>,闭合包裹下拉框的label标签。 - 删除CSS中
input规则块后多余的右花括号,让.align类的单选框样式可以正常生效。 - 补全所有未闭合的表单、fieldset标签,避免后续出现其他渲染异常。
修复后核心代码
CSS部分
.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; }
HTML部分
<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="#"> <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> </select> </label> </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> </fieldset> </form> </div>
内容的提问来源于stack exchange,提问作者user19260499
相关产品推荐
相关产品推荐

