HTML – 如何对齐单选按钮和标签？

概述我正在构建一个集成到第三方系统,并需要格式化一些单选按钮.供应商给我们这个 HTML： <span class="radiocontainer"> <label for="genderMale" class="radiolabel">Male</label> <input class="selector" id="genderMale" name="Gender" type="ra 我正在构建一个集成到第三方系统,并需要格式化一些单选按钮.供应商给我们这个 HTML：

<span >    <label for="genderMale" >Male</label>    <input  ID="genderMale" name="Gender" type="radio" value="2">    <label for="genderFemale" >Female</label>    <input  ID="genderFemale" name="Gender" type="radio" value="1"></span>

我需要它像这样呈现它：

我试过并且失败了,使用flexBox来完成这个：

span.radiocontainer {  float: none;  display: flex;  align-items: left;  justify-content: left;  flex-direction: column;  flex-wrap: wrap;  align-content: left;}span.radiocontainer > label.selected.radiolabel {  Box-shadow: none;  wIDth: 50%;  border: 0px;}span.radiocontainer > input {  wIDth: 50%;}

<span >    <label for="genderMale" >Male</label>    <input  ID="genderMale" name="Gender" type="radio" value="2">    <label for="genderFemale" >Female</label>    <input  ID="genderFemale" name="Gender" type="radio" value="1"></span>

我有什么方法可以格式化左边的单选按钮吗？或者我需要改变我的设计？

我不能改变HTML,因为它来自供应商,CSS是我们唯一可以定制的东西.

解决方法 CSS网格

这里最合适的方法是CSS Grid Layout.下面的方法使用现代语法,但没有IE / Edge支持.

.radiocontainer {  display: inline-grID;  /* tells the auto-placement algorithm to attempt to fill in holes earlIEr in the grID if smaller items come up later */  grID-auto-flow: dense;  align-items: center;}.radiocontainer label {  grID-column: 2;}

<span >    <label for="genderMale" >Male</label>    <input  ID="genderMale" name="Gender" type="radio" value="2">    <label for="genderFemale" >Female</label>    <input  ID="genderFemale" name="Gender" type="radio" value="1"></span>

如果您还需要IE和Edge支持,则必须使用旧语法. IE / Edge实现中没有自动放置行为,因此您必须手动指定每个项目(第一个除外)的对齐方式.如果您没有放置项目,它们将叠加在IE / Edge中网格的第一个单元格中.这适用于IE10：

.radiocontainer {  display: -ms-inline-grID;  display: inline-grID;  align-items: center;}.radiocontainer label {  display: block;}input:nth-of-type(2) {  -ms-grID-row: 2;  grID-row: 2;}label:nth-of-type(1) {  -ms-grID-row: 1;  grID-row: 1;  -ms-grID-column: 2;  grID-column: 2;}label:nth-of-type(2) {  -ms-grID-row: 2;  grID-row: 2;  -ms-grID-column: 2;  grID-column: 2;}input:nth-of-type(3) {  -ms-grID-row: 3;  grID-row: 3;}

<span >    <label for="genderMale" >Male</label>    <input  ID="genderMale" name="Gender" type="radio" value="2">    <label for="genderFemale" >Female</label>    <input  ID="genderFemale" name="Gender" type="radio" value="1">    <input  ID="asdf" name="Gender" type="radio" value="1"></span>

FlexBox的

我会改进@NenadVracar answer：

>我们可以删除为每个项目设置订单的需要.我们可以设置flex-direction：row-reverse for container.
>设置输入和标签的百分比(50％)是个坏主意.增加/减少标签长度会扭曲我们的单选按钮列表的外观.我们需要为单选按钮设置固定宽度.

.radiocontainer {  display: inline-flex;  flex-direction: row-reverse;  flex-wrap: wrap;  align-items: center;}.radiocontainer input,.radiocontainer label {  margin: 0;}.radiocontainer input {  wIDth: 20px;}.radiocontainer label {  wIDth: calc(100% - 20px);}

<span >    <label for="genderMale" >Male</label>    <input  ID="genderMale" name="Gender" type="radio" value="2">    <label for="genderFemale" >Female</label>    <input  ID="genderFemale" name="Gender" type="radio" value="1"></span>

CSS浮动

这种方式甚至可以在IE9中工作,但是居中的单选按钮不起作用.

如果您看到@TejasviKarne,您会注意到.radiocontainer的宽度不考虑标签的宽度.如果您关心它,您可以这样做：

.radiocontainer {  display: inline-block; /* Take wIDth of content */}.radiocontainer input,.radiocontainer label {  margin: 0;}.radiocontainer label {  wIDth: calc(100% - 15px);  float: right;}

<span >    <label for="genderMale" >Male</label>    <input  ID="genderMale" name="Gender" type="radio" value="2">    <label for="genderFemale" >Female</label>    <input  ID="genderFemale" name="Gender" type="radio" value="1"></span>

总结

以上是内存溢出为你收集整理的HTML – 如何对齐单选按钮和标签？全部内容，希望文章能够帮你解决HTML – 如何对齐单选按钮和标签？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。