// 自由代码组件 <div id="{id}" class="layui-form-item {selected}" data-id="{id}" data-tag="{tag}" data-index="{index}" style="height:50px"> <!-- 任意添加html代码 --> <div> <div class="box"> <div class="titles" style="margin-top: 17px;">标题</div> <div class="content" style="margin-top:10px"> <div class="layui-form-item"> <div class="ord" style="margin-left:10px"> <input type="radio" name="sex" value="男" title="男"> <input type="radio" name="sex" value="女" title="女" checked> </div> </div> </div> </div> <div style="margin-top:20px;position:absolute"> <div class="layui-btn-group"> <button type="button" class="layui-btn" id="row">横排</button> <button type="button" class="layui-btn" id="col">竖排</button> </div> </div> </div> $(function () { $(".layui-btn").click(function () { $(".layui-btn").css("background-color", ""); $(this).css("background-color", "#5FB878"); }); $("#row").click(function () { $(".box").css("display", "flex"); $(".titles").css("order", "1"); $(".content").css("order", "2"); $(".layui-input").css("margin-left","10px") }); $("#col").click(function () { $(".box").css("display", "block"); $(".titles").css("order", ""); $(".content").css("order", ""); $(".layui-input").css("margin-left","0px") }); }); 如何修改为当点击竖排时 男女也是竖向排序

您可以将radio控件的外层div的display属性改为"flex"，并将flex-direction属性改为"column"，这样就可以实现竖向排序。具体代码如下：

<div class="ord" style="margin-left:10px;display:flex;flex-direction:column;">
    <input type="radio" name="sex" value="男" title="男">
    <input type="radio" name="sex" value="女" title="女" checked>
</div>

然后再将竖排按钮的click事件中的$(".layui-input").css("margin-left","10px")改为$(".layui-input").css("margin-left","")，去掉marginLeft属性即可。完整代码如下：

$("#col").click(function () {
    $(".box").css("display", "block");
    $(".titles").css("order", "");
    $(".content").css("order", "");
    $(".layui-input").css("margin-left","");
    $(".ord").css("display","flex");
    $(".ord").css("flex-direction","column");
});