savior
savior
  • 发布:2014-11-18 19:54
  • 更新:2020-02-14 11:28
  • 阅读:14534

input radio如何实现横向布局

分类:MUI

默认都是纵向的,我想要横向的怎么破

2014-11-18 19:54 负责人:无 分享
已邀请:
小云菜

小云菜 - 相关代码及分享在http://www.cnblogs.com/phillyx

下面的一种方式更简单,不去抠原生的样式,将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>
DCloud_UNI_FXY

DCloud_UNI_FXY

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

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

小云菜

小云菜 - 相关代码及分享在http://www.cnblogs.com/phillyx

我这边要实现通过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>
  • DCloud_UNI_FXY

    input[type='radio']:checked:before {

    content: "\e441";

    }


    2015-04-18 00:04

  • 小云菜

    是这样,3q


    2015-04-18 09:39

ifastudy

ifastudy

两个以上的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>

1***@qq.com

1***@qq.com

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

该问题目前已经被锁定, 无法添加新回复