html中redio单选框与文字对齐方法

2025-10-24 00:55:52

1、打开VSCode前端工具,新建html页面,输入

 <div class="analysis-redio">

            <span class="title">时间<input type="radio" name="period"   checked="checked" class="conent"  value="0" v-model='date.period'/></span>

            <span class="title">季度<input type="radio" name="period"  checked="" class="conent"  value="1"  v-model='date.period'/></span>

        </div>

html中redio单选框与文字对齐方法

2、不处理的效果,可以看到radio与文字是不在一条水平线上的,这时你margin-top,margin-bottom都是不起作用的

html中redio单选框与文字对齐方法

1、在每个radio上加上样式

 vertical-align: middle;

    margin-top: -2px;

    margin-bottom: 1px;

html中redio单选框与文字对齐方法

2、vertical-align 是设置 属性元素的垂直对齐方式,middle属性是此元素放置在父元素的中部,效果就对齐了

html中redio单选框与文字对齐方法

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢