返回首页
当前位置: 主页 > 网络编程 > Asp实例教程 >

CSS input checkbox、radio、button与文字对齐

时间:2017-11-06 22:56来源:知行网www.zhixing123.cn 编辑:麦田守望者

如果把文字与 checkbox、radio、button 排在一起,它们不对齐,文字总要下一点,看起来有点别扭,有无办法使它们对齐?用 Css 可以实现此目的,不过在使用过程中,可能会遇到一些问题。

  如果 Css 定义的 html 标签不对,虽然 Css 是一样,但仍然不能让 checkbox、radio、button 与文字对齐,笔者在实际应用过程中就多次遇到这种情况,故总结出来与大家分享,避免犯类似的错误而浪费时间增加烦恼。

 

  一、input checkbox 与文字对齐

  html 代码:

  <div>
    </input type="checkbox" id="cb" value="0" />;<label for="cb">全选</label>
  </div>

  不加 Css 样式,上面的 checkbox 与文字(全选)并不对齐,“全选”稍微下了一点,效果如下:

    全选

 

  对齐 Css 样式:

  .SelectAll input{vertical-align:middle; margin-bottom:2px; *margin-bottom:2px;}

 

  引用 Css 后:

  <div class="SelectAll">
    </input type="checkbox" id="cb" value="0" />;<label for="cb">全选</label>
  </div>

  加上 Css 样式后,checkbox 与文字对齐了,效果如下:

    全选

 

  注意:Css 要定义 input,如果定义 label,则 checkbox 与文字不一定对齐。

 

 

  二、input radio 与文字对齐

  html 代码:

  <div>
    </input type="radio" id="rad1" value="0" />;<label for="rad1">是</label></input type="radio" id="rad2" value="0"/>;<label for="rad2">否</label>
  </div>

  未加 Css 样式时,radio 与“是或否”并没有对齐,它们都稍微靠下一点,效果如下:  

    是否

 

  对齐 Css 样式:

  .radioAlign input{vertical-align:middle; margin-bottom:2px; *margin-bottom:2px;}

 

  引用 Css 后:

  <div class="radioAlign">
    </input type="radio" id="rad1" value="0" />;<label for="rad1">是</label></input type="radio" id="rad2" value="1"/>;<label for="rad2">否</label>
  </div>

  用 Css 后,radio 与文字已经对齐,效果如下:  

    是否   

 

 

  三、input button 与文字对齐

  html 代码:

  <div>
    </input type="button" id="btn" value=" 提 交 " />;<label for="btn">说明</label>
  </div>

  ie8、9 以上版本或火狐浏览器,未加 Css 样式时,button 与文字(说明)已经对齐,但 ie6 却没有对齐,效果如下:

    说明

 

  对齐 Css 样式:

  .buttonAlign input{vertical-align:middle; margin-bottom:2px; *margin-bottom:2px;}

 

  引用 Css 后:

  <div class="buttonAlign">
    </input type="button" id="btn" value=" 提 交 " />;<label for="btn">说明</label>
  </div>

 

  用 Css 后,ie6 buttton 也与文字对齐了,效果如下:  

    说明

顶一下
(0)
0%
踩一下
(0)
0%
标签(Tag):css
------分隔线----------------------------
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片
猜你感兴趣