input radio如何实现横向布局

下面的一种方式更简单，不去抠原生的样式，将radio包裹在span中，更改相对位置就可以了：

            .radio_inline{  
                display: inline-block;  
                width: 65%;  
            }  
            .radio_inline label{  

                width: 20%;  
                padding-left: 40px;  
                padding-right: 40px;  
            }  
            .radio_inline input[type=radio]{  

                width: 15%;               
                right: auto;  
            }  

<div class="mui-input-row ">  
                        <label>性别</label>  
                        <span class="radio_inline mui-radio">  
                            <input name="radio1" type="radio" id="radio_man" checked value="1">  
                            <label for="radio_man">男</label>  
                            <input name="radio1" type="radio" id="radio_woman" value="0">         
                            <label for="radio_woman">女</label>        
                        </span>               
                    </div>

你要横向放几个radio？手机应用很少会用到横向放几个radio的情况吧。

三个及以上的话，用select实现，二个的话用checkbox或switch基本可以实现相同业务逻辑吧。

我这边要实现通过radio横向布局选择男女，目前checked时 内部圆心是不显示的，怎么去解决呢？

input[type=radio]{  

                 height: 26px;  
                 left: 35%;  
                 position: absolute;  
                 top: 5px;  
                 width: 28px;  
                 border: none;  
                 display: inline-block;  
                 -webkit-appearance: none;  
                 background-color: transparent;  

                 outline: 0!important;  
            }  
            input[type='radio']:before{  
              font-family: Muiicons;  
              font-size: 28px;  
              font-weight: 400;  
              line-height: 1;  
              color: rgba(170,170,170,.6);  
              content: "\e411";  
            }  
            input[type='radio']:checked{  

            }  
            input[type='radio']:checked,input[type='radio']:checked:before{  
                color: #007aff;  

            }  
            input[type='radio']:last-child{  
                 left: 60%;  
            }  
#man{  
                position: absolute;  
                left: 40%;  
                top: 2px;  
            }  
            #women{  
                top: 2px;  
                position: absolute;  
                right: 0px;  
            }

<div class="mui-input-row ">  

                        <label>性别</label>  
                            <label id="man">男</label>  
                        <input name="radio1" type="radio" checked value="1">  
                        <label id="women">女</label>  
                        <input name="radio1" type="radio" value="0">  

                    </div>

两个以上的radio在手机上可以用pagination来实现. 操作性很好.

要这么复杂嘛。。。
<div class="mui-input-row">
<div class=" mui-radio mui-pull-left mui-left">
<label>随机金额</label>
<input name="radio" type="radio" checked>
</div>
<div class="mui-radio mui-pull-left mui-left">
<label>固定金额</label>
<input name="radio" type="radio" checked>
</div>
</div>

官方出一个横向的radio就好了 我也是用在性别那里的