前往顾页
以后地位: 主页 > 收集编程 > 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 与笔墨不必然对齐。

 

 

  2、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 与笔墨已对齐,结果以下:  

    是不是   

 

 

  3、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
------分开线----------------------------
颁发评论
请自发遵循互联网相关的政策法规,严禁公布色情、暴力、革命的谈吐。
评价:
神色:
考证码:点击我更换图片
猜你感兴趣