gpt4 book ai didi

css - 单选按钮内联并以标签居中

转载 作者:太空宇宙 更新时间:2023-11-04 00:29:14 25 4
gpt4 key购买 nike

我有以下表格:

        <form action="post.php" method="POST">
<fieldset>
<div class="ratingClass">
<input type="radio" class="radio" name="rate" value="1" id="1"/>
<label for="1">1</label>
<input type="radio" class="radio" name="rate" value="2" id="2"/>
<label for="2">2</label>
<input type="radio" class="radio" name="rate" value="3" id="3"/>
<label for="3">3</label>
<input type="radio" class="radio" name="rate" value="4" id="4"/>
<label for="4">4</label>
<input type="radio" class="radio" name="rate" value="5" id="5"/>
<label for="5">5</label>
</div>
</fieldset>
<input type="submit" value="Rate">
</form>

由以下 CSS 样式化:

fieldset { 
overflow:hidden;
}
.ratingClass {
float:left;
clear:none;
}
label {
float:left;
clear:none;
display:block;
padding: 2px 1em 0 0;
}
input[type=radio], input.radio {
float:left;
clear:none;
margin: 2px 0 0 2px;
}

它全部位于另一个具有 text-align: center; 样式的 div 中。

我意识到这种行为是因为 float ,但如果我删除它们,那么单选按钮将不再内联显示。

如何让它们内联并居中?

最佳答案

您不需要 float 所有内容,也不需要使标签 block 元素。用这个替换你的 CSS 会使一切都居中:

fieldset {
overflow: hidden;
}
label {
padding: 2px 1em 0 0;
}
input[type=radio], input.radio {
margin: 2px 0 0 2px;
}

<div class="ratingClass">也是多余的,可以删除。

关于css - 单选按钮内联并以标签居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5034092/

25 4 0