单选按钮radio与文字如何对齐?

布局如下:

<input type="radio" value="立即发送" name="a_1">立即发送
<input type="radio" value="保存到草稿箱" name="a_1">保存到草稿箱
如何才能让那个小按钮与文字对其呢?

解决方法:
1.以vertical-align:text-bottom为基础的
css代码如下:vertical-align:text-bottom; margin-bottom:2px; margin-bottom:-2px\9;
2.以vertical-align:text-top为基础的
css代码如下:height:13px; vertical-align:text-top; margin-top:0;
3.以vertical-align:bottom为基础的
css代码如下:height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;
4.以vertical-align:middle为基础的
css代码如下:vertical-align:middle; margin-top:-2px; margin-bottom:1px;

时间: 2024-11-25 21:44:22

单选按钮radio与文字如何对齐?的相关文章

文字和表单(checkbox/radio)元素垂直对齐方法,兼容Firefox和IE。

这几天在做表单时总会碰到复选框(checkbox)和单选框(radio)与文字不对齐的问题,要不是checkbox上浮了,要不是文字上浮.在前端开发过程中,单(复)选框和它们后面的提示文字在不进行任何设置的情况下,是无法对齐的,而且在Firefox和IE中相差甚大.即使设置了vertical-align:middle,也依然不能完美对齐. 解决办法: 1.文字大小必须是偶数,比如12PX. 2.将文字加上label标签并且也添加vertical-align:middle样式. 3.然后去除表单元

纯CSS3美化单选按钮radio

这种纯CSS3美化单选按钮radio的方法适用于以下情况: 1.可兼容IE9以上,需要兼容IE8的要写IE的hack把样式去掉 2.只支持单选按钮radio,因为单选按钮选中样式的圆圈可以用CSS做出来,但是复选按钮checkbox的选中效果对勾就需要图片或者图标字体库 3.不需要JS支持切换效果 下图是最终效果图: HTML代码: <label for="man" class="radio"> <span class="radio-bg

点击单选按钮后的文字即可选定对应单选按钮

比如我想点击单选按钮后的文字就选中相应的按钮: <input type="radio" name="sex" value="1" id="men" /><label >男 </label> <input type="radio" name="sex" value="0" id="women" />&l

checkbox与说明文字无法对齐的问题

写过Web页面的朋友大概都曾遇到过这样的问题:checkbox与说明文字(比如一个label标签或一个a标签)无法对齐,要不是checkbox上浮了,要不是说明文字上浮. 以前遇到过这个问题,但是都直接忽视,并未深究.今天要解决项目中遗留下的界面显示问题,这个问题终于绕不过去了,因为它真的是无处不在. 今天,借助于伟大的google,同时自己不断试验,终于解决了这个"老大难"的"历史遗留问题".现将经验分享如下: 其实很简单,真的灰常简单,把要对齐的每个标签,都加一

HTML,文字两端对齐

text-align: justify样式的意思是文字两端对齐,但是有时候你会发现这东西不起左右,比如在div标签中的文字. 解决方法:在div中放一个空的span标签,并使用下面的样式. .justify        {            text-align: justify;            width: 100px;        }        .justify > span        {            display: inline-block /* Ope

让UILabel的文字顶部对齐

默认UILabel是垂直居中对齐的,如果你的UILabel高度有多行,当内容少的时候,会自动垂直居中. 如下图所示(图片来自stackoverflow): 比较郁闷的是,UILabel并不提供设置其垂直对齐方式的选项.所以如果你想让你的文字顶部对齐,那么就需要自己想办法了. stackoverflow.com 上提供了几种方法来达到顶部对齐的效果. 方法一 在显示文字时,首先计算显示当前的文字需要多宽和多高,然后将对应的UILabel的大小改变成对应的宽度和高度.此方法的相示意图如下: 在显示文

可用的CSS文字两端对齐

最近在工作项目中接触到Web界面设计的问题,要实现文字两端对齐的效果.在网上搜索了一下,用的都是类似的技巧: text-align:justify;text-justify:inter-ideograph; 我遇到问题是:看不到效果,无论是英文还是中文,在IE和chrome下都不起作用.还好在StackOverflow上找到了解决方法 :) 样式: 1 div.justify 2 { 3 text-align: justify; width:200px; font-size:15px; colo

css实现一行文字居中,多行文字左对齐

问题及场景: 当内容能一行显示在盒子内时,文字居中对齐. 当内容过多换行后显示在盒子内时,文字左对齐. 其实这种视觉上的需求还是蛮常见的.比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框,提示内容比较多时,内容居左对齐.但是其纯CSS实现有点麻烦,一般就放掉这个需求,或者,使用JS实现. 解决方案: 效果如下 CSS实现代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta chars

IOS UI篇—UILabel的文字顶部对齐

UILabel的文字顶部对齐 NOV 20TH, 2011 默认UILabel是垂直居中对齐的,如果你的UILabel高度有多行,当内容少的时候,会自动垂直居中. 如下图所示(图片来自stackoverflow): 比较郁闷的是,UILabel并不提供设置其垂直对齐方式的选项.所以如果你想让你的文字顶部对齐,那么就需要自己想办法了. stackoverflow.com 上提供了几种方法来达到顶部对齐的效果. 方法一 在显示文字时,首先计算显示当前的文字需要多宽和多高,然后将对应的UILabel的