html– 对齐复选框和标签

概述我有一个代码如下所示的表单：<div id='right_sidebar'> <form id='your_name' name='your_name' action='#' method='post' style='display: block; '> <fieldset> <label

我有一个代码如下所示的表单：

并使用以下CSS设置样式：
body {color: #333;font: 12px Arial,Helvetica Neue,Helvetica,sans-serif;}#right_sidebar {padding-top: 12px;width: 190px;position:relative;}form {background: #EEF4F7;border: solid red;border-width: 1px 0;display: block;margin-top: 10px;padding: 10px;}form label {color: #435E66;    display:block;font-size: 12px;    }form textarea {border: 1px solid #ABBBBE;margin-bottom: 10px;padding: 4px 3px;width: 160px;-moz-border-radius: 3px;border-radius: 3px;}form label a {display: block;padding-left: 10px;position: relative;text-decoration: underline;}form label a .sp {background: #EEF4F7;height: 0;left: 0;position: absolute;top: 2px;width: 0;border-top: 4px solid transparent;border-bottom: 4px solid transparent;border-left: 4px solid #333;}form button.blue_button {margin-top: 10px;vertical-align: top;}button.blue_button{color: white;font-size: 12px;height: 22px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}button.blue_button {background-color: #76C8C6;border: 1px solid #7798B7;text-shadow: 1px 1px 0px #567C9E;}
如您所见,复选框位于标签顶部.我希望两者“在同一条线上”.所以,它看起来像“[]接受条款”.如何使文本垂直对齐复选框.
我怎么能两个都做？
你可以在这里看到它：form,checkbox failing最佳答案一个选项是修改复选框后面的label元素的样式：
​input[type=checkBox] + label {    display: inline-block;    @R_404_5553@-left: 0.5em;    @R_404_5553@-right: 2em;    line-height: 1em;}
JS Fiddle demo.
然而,这有点脆弱,因为边距有点任意(并且边距右边纯粹是强制下一个按钮到下一行).此外,属性等于选择器可能会导致旧浏览器出现问题.
正如AlIEn先生在评论中暗示的那样,使用此选择符表示法实际上更容易定位复选框本身：
input[type=checkBox] {    float: left;    @R_404_5553@-right: 0.4em;}
JS Fiddle demo.          总结       
以上是内存溢出为你收集整理的html  – 对齐复选框和标签全部内容，希望文章能够帮你解决html  – 对齐复选框和标签所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
原文地址:https://54852.com/web/1123959.html