HTML <label> 标签的 for的这个属性怎么调整

<html><body><p>请点击文本标记之一，就可以触发相关控件：</p><form><labelfor="male">Male2121</label><inputt... <html>
<body>

<p>请点击文本标记之一，就可以触发相关控件：</p>

<form>
<label for="male">Male2121</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>

</body>
</html>

变成两列，如何修改？展开

 我来答

1个回答

#热议# 空调使用不当可能引发哪些疾病？

一年孤独58aa
2018-05-21 · TA获得超过1404个赞

知道小有建树答主

回答量：592

采纳率：92%

帮助的人：441万

我也去答题访问个人页

关注

展开全部

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <p>请点击文本标记之一，就可以触发相关控件：</p>
    <form>
        <label>Male2121<input type="radio" name="sex" id="male"></label>
        <label>Female<input type="radio" name="sex" id="female"></label>
    </form>
</body>
</html>

追问



{$value.label} 

这是个循环要显示成
111        2222
3333     44444
这种样式的 也就是说2列多行的单选

追答

可以自定义css样式进行解决,方法有很多中, 提供下面供参考, 请注意:

我是将input用label包裹起来, 这样就不用考虑for属性, 结构也更加合理清晰;
自定义的核心样式是.radio, 父级样式.radio-group默认width为100%, 可以修改它来控制宽度(可影响同一行两个label的间隔距离)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .radio-group{
            display:block;
            width:100%;
        }
        .radio-group > .radio{
            display:inline-block;
            width:49%;
        }
    </style>
</head>
<body>
    <p>请点击文本标记之一，就可以触发相关控件：</p>
    <form class="radio-group">
        <label class="radio">radio1<input type="radio" name="myradio"></label>
        <label class="radio">radio2<input type="radio" name="myradio"></label>
        <label class="radio">radio3<input type="radio" name="myradio"></label>
        <label class="radio">radio4<input type="radio" name="myradio"></label>
        <label class="radio">radio5<input type="radio" name="myradio"></label>
    </form>
</body>
</html>