关于html：如何一致地跨浏览器对齐复选框及其标签


How to align checkboxes and their labels consistently cross-browsers

这是不断困扰我的小CSS问题之一。堆栈溢出周围的人如何垂直对齐checkboxes和他们的labels一致的跨浏览器？每当我在Safari(通常在input上使用vertical-align: baseline)中正确对齐它们时，它们在FireFox和IE中就完全关闭了。在FireFox中修复它，Safari和IE不可避免地会出错。每次编码表单时，我都在浪费时间。

以下是我使用的标准代码：

1
2
3
4
5
<form>
   
        <label><input type="checkbox" /> Label text</label>
   
</form>

我通常使用EricMeyer的reset，所以表单元素相对来说没有覆盖。期待您提供的任何提示或技巧！

相关讨论

经过一个多小时的调整、测试和尝试不同的标记样式，我认为我可能有一个不错的解决方案。这个特定项目的要求是：

  • 输入必须在自己的行上。
  • 复选框输入需要在所有浏览器中与标签文本垂直对齐(如果不相同)。
  • 如果标签文本换行，则需要缩进(因此复选框下方不换行)。

    • 在我做出解释之前，我先给你代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    label {
      display: block;
      padding-left: 15px;
      text-indent: -15px;
    }
    input {
      width: 13px;
      height: 13px;
      padding: 0;
      margin:0;
      vertical-align: bottom;
      position: relative;
      top: -1px;
      *overflow: hidden;
    }
    1
    2
    3
    4
    5
    <form>
     
        <label><input type="checkbox" /> Label text</label>
     
    </form>

    下面是jsFiddle中的工作示例。

    这段代码假定您使用的是类似于EricMeyer的重置，它不会覆盖表单输入边距和填充(因此在输入css中放置边距和填充重置)。显然，在一个活动环境中，您可能会嵌套/重写一些东西来支持其他输入元素，但我希望保持简单。

    需要注意的事项：

    • *overflow声明是一个内联IE hack(star property hack)。IE6和7都会注意到它，但是Safari和Firefox会正确地忽略它。我认为它可能是有效的CSS，但您最好还是使用条件注释，只是为了简单起见。
    • 据我所知，在浏览器中唯一一致的vertical-align声明是vertical-align: bottom。在Safari、FireFox和IE中，设置这个然后相对向上定位的行为几乎相同，只有一两个像素的差异。
    • 使用对齐的主要问题是，在输入元素周围插入一堆神秘的空间。它不是填充或边缘，它是该死的持久。在复选框上设置宽度和高度，然后由于某种原因，overflow: hidden会切断额外的空间，并允许IE的定位与Safari和Firefox非常相似。
    • 根据文本大小，您无疑需要调整相对位置、宽度、高度等，以使事情看起来正确。

    希望这能帮助别人！除了今天早上我正在做的项目之外，我没有在其他项目上尝试过这种特定的技术，所以如果你发现一些更能持续工作的项目，肯定会大吃一惊。

    相关讨论

    有时垂直对齐需要相邻的两个内联(跨度、标签、输入等)元素才能正常工作。以下复选框在IE、Safari、FF和Chrome中垂直居中，即使文本大小非常小或很大。

    它们在同一行中彼此相邻浮动，但nowrap意味着整个标签文本始终保持在复选框旁边。

    缺点是额外的毫无意义的跨度标签。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .checkboxes label {
      display: block;
      float: left;
      padding-right: 10px;
      white-space: nowrap;
    }
    .checkboxes input {
      vertical-align: middle;
    }
    .checkboxes label span {
      vertical-align: middle;
    }
    1
    2
    3
    4
    5
    6
    7
    <form>
     
        <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
        <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
        <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
     
    </form>

    现在，如果有一个很长的标签文本需要在复选框下换行而不换行，则在标签元素上使用填充和负文本缩进：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    .checkboxes label {
      display: block;
      float: left;
      padding-right: 10px;
      padding-left: 22px;
      text-indent: -22px;
    }
    .checkboxes input {
      vertical-align: middle;
    }
    .checkboxes label span {
      vertical-align: middle;
    }
    1
    2
    3
    4
    5
    6
    7
    <form>
     
        <label for="x"><input type="checkbox" id="x" /> <span>Label text x</span></label>
        <label for="y"><input type="checkbox" id="y" /> <span>Label text y</span></label>
        <label for="z"><input type="checkbox" id="z" /> <span>Label text z</span></label>
     
    </form>

    相关讨论

    用一支蜡笔的方法，我有一些对我有用的东西，而且更简单：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .font2 {font-family:Arial; font-size:32px} /* Sample font */

    input[type=checkbox], input[type=radio] {
      vertical-align: middle;
      position: relative;
      bottom: 1px;
    }

    input[type=radio] {
      bottom: 2px;
    }
    1
    2
    3
    4
    5
    <label><input type="checkbox" /> Label text</label>
    <p class="font2">
      <label><input type="checkbox"/> Label text</label>

    </p>

    在Safari(我信任它的基线)和Firefox和IE7中，像素对像素的渲染是相同的。它还适用于各种大小的标签字体。现在，为了修正IE在选择和输入上的基线…

    更新：(第三方编辑)

    正确的bottom位置取决于字体系列和字体大小！我发现对复选框和无线电元素使用bottom: .08em;是一个很好的通用值。我在Windows的Chrome/FireFox/IE11中测试了它，使用了几种小/中/大字体的Arial&calibri字体。

    1
    2
    3
    4
    5
    6
    7
    .font2, .font2 input {font-family:Arial; font-size:32px} /* Sample font */

    input[type=checkbox], input[type=radio] {
      vertical-align: middle;
      position: relative;
      bottom: .08em; /* this is a better value for different fonts! */
    }
    1
    2
    3
    4
    5
    6
    <label><input type="checkbox" /> Label text</label>

    <p class="font2">
      <label><input type="checkbox"/> Label text</label>

    </p>

    相关讨论

    一件看起来很好用的事情是应用一个调整垂直对齐复选框的垂直位置。它在不同的浏览器中仍然会有所不同，但解决方案并不复杂。

    1
    2
    3
    input {
        vertical-align: -2px;
    }

    参考文献

    相关讨论

    试试vertical-align: middle。

    而且，您的代码似乎应该是：

    1
    2
    3
    4
    5
    <form>
       
            <input id="blah" type="checkbox"><label for="blah">Label text</label>
       
    </form>

    相关讨论

    尝试我的解决方案，我在IE 6、FF2和Chrome中尝试过，它在所有三个浏览器中逐像素呈现。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    * {
      padding: 0px;
      margin: 0px;
    }
    #wb {
      width: 15px;
      height: 15px;
      float: left;
    }
    #somelabel {
      float: left;
      padding-left: 3px;
    }
    1
    2
      <input id="wb" type="checkbox" />
      <label for="wb" id="somelabel">Web Browser</label>

    相关讨论

    对我来说，唯一完美的解决方案是：

    1
    2
    3
    4
    5
    input[type=checkbox], input[type=radio] {
        vertical-align: -2px;
        margin: 0;
        padding: 0;
    }

    今天在Chrome、Firefox、Opera、IE 7和8中进行了测试。小提琴：小提琴

    相关讨论

    我通常使用行高来调整静态文本的垂直位置：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    label {
      line-height: 18px;
    }
    input {
      width: 13px;
      height: 18px;
      font-size: 12px;
      line-height: 12px;
    }
    1
    2
    3
    4
    5
    <form>
     
        <label><input type="checkbox" /> Label text</label>
     
    </form>

    希望有帮助。

    相关讨论

    我还没有完全测试过我的解决方案，但它似乎工作得很好。

    我的HTML只是：

    1
    <label class="checkbox"><input type="checkbox" value="0000">0000 - 0100</label>

    然后，我将高度和宽度的所有复选框都设置为24px。为了使文本对齐，我将标签的line-height也设置为24px，然后这样分配vertical-align: top;：

    编辑：在IE测试之后，我将vertical-align: bottom;添加到输入中，并更改了标签的CSS。您可能会发现需要一个有条件的IE CSS大小写来排序填充-但是文本和框是内联的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    input[type="checkbox"] {
        width: 24px;
        height: 24px;
        vertical-align: bottom;
    }
    label.checkbox {
        vertical-align: top;
        line-height: 24px;
        margin: 2px 0;
        display: block;
        height: 24px;
    }

    如果有人发现这不管用，请告诉我。这是它的作用(在Chrome和IE中——在视网膜上截图并对IE使用平行线时表示歉意)：

    screenshot of checkboxes: Chromescreenshot of checkboxes: IE

    我认为这是最简单的方法

    1
    2
    3
    4
    input {
        position: relative;
        top: 1px;
    }

    小提琴

    相关讨论

    这对我很有效：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    fieldset {
      text-align:left;
      border:none
    }
    fieldset ol, fieldset ul {
      padding:0;
      list-style:none
    }
    fieldset li {
      padding-bottom:1.5em;
      float:none;
      clear:left
    }
    label {
      float:left;
      width:7em;
      margin-right:1em
    }
    fieldset.checkboxes li {
      clear:both;
      padding:.75em
    }
    fieldset.checkboxes label {
      margin:0 0 0 1em;
      width:20em
    }
    fieldset.checkboxes input {
      float:left
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <form>
      <fieldset class="checkboxes">
       
    <ul>

         
    <li>

            <input type="checkbox" name="happy" value="yep" id="happy" />
            <label for="happy">Happy?</label>
         
    </li>

         
    <li>

            <input type="checkbox" name="hungry" value="yep" id="hungry" />
            <label for="hungry">Hungry?</label>
         
    </li>

       
    </ul>

      </fieldset>
    </form>

    相关讨论

    我不喜欢相对定位，因为它使元素在其级别上呈现在所有其他元素之上(如果您有复杂的布局，它可以在某些内容之上)。

    我发现vertical-align: sub使复选框在Chrome、Firefox和Opera中看起来足够好。不能检查Safari，因为我没有MacOS，IE10有点问题，但我发现它对我来说已经足够好了。

    另一个解决方案可能是尝试为每个浏览器制作特定的CSS，并使用一些垂直对齐的百分比/像素/ems对其进行微调：http://css-tricks.com/snippets/css/browser-specific-hacks/

    相关讨论

    现在，所有的现代浏览器都支持flexbox，对我来说，这似乎是一种更简单的方法。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <style>
    label {
      display: flex;
      align-items: center;
    }
    input[type=radio], input[type=checkbox]{
      flex: none;
    }
    </style>
    <form>
     
        <label><input type="checkbox" /> Label text</label>
     
    </form>

    以下是完整的前缀版本演示：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    label {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
    input[type=radio],
    input[type=checkbox] {
        -webkit-box-flex: 0;
        -webkit-flex: none;
        -ms-flex: none;
        flex: none;
        margin-right: 10px;
    }
    /* demo only (to show alignment) */
    form {
      max-width: 200px
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <form>
      <label>
        <input type="radio" checked>
        I am an aligned radio and label
      </label>
      <label>
          <input type="checkbox" checked>
        I am an aligned checkbox and label
      </label>
    </form>

    我从来没有遇到过这样做的问题：

    1
    2
    3
    4
    5
    <form>
     
        <input type="checkbox" id="cb" /> <label for="cb">Label text</label>
     
    </form>
    相关讨论

    如果使用ASP.NET Web窗体，则无需担心div和其他元素或固定大小。我们可以通过将float:left设置为CSS中的复选框列表输入类型来对齐文本。

    请检查以下示例代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .CheckboxList
    {
        font-size: 14px;
        color: #333333;
    }
    .CheckboxList input
    {
        float: left;
        clear: both;
    }

    ASPX代码：

    1
    </asp:CheckBoxList>

    在Chrome28OSX中，选择的400+以上投票的答案对我不起作用，可能是因为它没有在OSX中进行测试，或者在2008年回答这个问题时，它在任何地方都起作用。

    时代已经改变，新的CSS3解决方案现在是可行的。我的解决方案使用伪元素创建自定义复选框。所以规定(不管你怎么看，利弊)如下：

    • 仅适用于现代浏览器(ff3.6+、ie9+、chrome、safari)
    • 依赖于自定义设计的复选框，该复选框将在每个浏览器/OS中呈现完全相同的内容。这里我刚刚选择了一些简单的颜色，但是你可以添加线性渐变，这样可以让它看起来更棒。
    • 调整到特定的字体/字体大小，如果更改，只需更改复选框的位置和大小，使其看起来垂直对齐。如果调整正确，最终结果在所有浏览器/操作系统中应该仍然接近完全相同。
    • 没有垂直对齐属性，没有浮动
    • 必须在我的示例中使用所提供的标记，如果结构与问题类似，它将不起作用，但是，布局基本上看起来是相同的。如果你想移动东西，你还必须移动相关的CSS

    您的HTML：

    1
    2
    3
    4
    5
    6
    <form>
       
            <input id="check_me" type=checkbox />
            <label for="check_me">Label for checkbox</label>
       
    </form>

    你的CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    div.checkbox {
        position: relative;
        font-family: Arial;
        font-size: 13px;
    }
    label {
        position: relative;
        padding-left: 16px;
    }
    label::before {
        content :"";
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: white;
        border: solid 1px #9C9C9C;
        position: absolute;
        top: 1px;
        left: 0px;
    }
    label::after {
        content:"";
        width: 8px;
        height: 8px;
        background-color: #666666;
        position: absolute;
        left: 2px;
        top: 3px;
        display: none;
    }
    input[type=checkbox] {
        visibility: hidden;
        position: absolute;
    }
    input[type=checkbox]:checked + label::after {
        display: block;
    }
    input[type=checkbox]:active + label::before {
        background-color: #DDDDDD;
    }

    此解决方案隐藏该复选框，并将伪元素添加到标签并设置其样式，以创建可见的复选框。由于标签绑定到隐藏复选框，输入字段仍将更新，值将与表单一起提交。

    jfiddle：http://jsfiddle.net/sgxyy/6/

    如果您感兴趣，下面是我对单选按钮的看法：http://jsfiddle.net/dtkrv/2/

    希望有人发现这有用！

    只是想添加到关于标签上"for"属性的讨论中(稍微偏离主题)：

    请务必提供它，即使在不需要的时候，因为它非常方便从javascript中使用：

    1
    2
    var label = ...
    var input = document.getElementById(label.htmlFor);

    这比试图找出标签是否嵌套了输入，或者输入是在标签之前还是之后要方便得多。等等，而且供应它也不会有什么坏处。所以。

    只有我的2美分。

    相关讨论

    1
    2
    3
    4
    5
    6
    7
    8
    <form>
       
            <label style="display: inline-block">
                <input style="vertical-align: middle" type="checkbox" />
                <span style="vertical-align: middle">Label text</span>
             </label>
       
    </form>

    技巧是，如果使用标签标记，则只在表格单元格或内联块中使用垂直对齐。

    如果你使用Twitter引导程序，你只需在上使用checkbox类：

    1
    2
    3
    <label class="checkbox">
        <input type="checkbox"> Remember me
    </label>

    硬编码复选框的高度和宽度，删除其填充，并使其高度加上垂直边距等于标签的行高。如果标签文本是内联的，则浮动该复选框。firefox、chrome和ie7+都以相同的方式呈现以下示例：http://www.kornea.com/css-checkbox-align

    相关讨论

    将输入类型复选框包装在标签内并像这样向左浮动：

    1
    2
    3
    4
    <label for="id" class="checkbox">
        <input type="checkbox" id="id">
        <span>The Label</span>
    </label>

    这对我很有用：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    label.checkbox {
        display: block;
    }
    .checkbox input {
        float: left;
        height: 18px;
        vertical-align: middle;
    }
    .checkbox span {
        float: left;
        line-height: 18px;
        margin: 0 0 0 20px;
    }

    确保的高度与(块级别)的线条高度相同。

    1
    2
    3
    4
    input[type=checkbox]
    {
        vertical-align: middle;
    }
    1
    2
    <input id="testCheckbox" name="testCheckbox" type="checkbox">
    <label for="testCheckbox">I should align</label>

    我通常不标记复选框，然后使其"label"成为单独的元素。这是一件痛苦的事情，但是复选框和它们的标签的显示方式(如您所注意到的)之间存在很大的跨浏览器差异，这是我能够接近控制所有东西外观的唯一方法。

    出于同样的原因，我最终也在WinForms开发中完成了这项工作。我认为复选框控件的根本问题是它实际上是两个不同的控件：框和标签。通过使用复选框，您将由控件的实现者决定这两个元素如何彼此相邻显示(并且它们总是出错，其中错误=不是您想要的)。

    我真的希望有人能更好地回答你的问题。

    正如pokrishka已经建议的那样，只需使用vertical-align: sub。

    小提琴

    HTML代码：

    1
    2
        <label for="check1">Test</label>
        <input id="check1" type="checkbox"></input>

    CSS代码：

    1
    2
    3
    .checkboxes input {
        vertical-align: sub;
    }

    所以我知道这个问题已经回答了很多次，但是我觉得我有一个比已经提供的更优雅的解决方案。不仅有1个优雅的解决方案，还有2个独立的解决方案，让您的幻想更加有趣。有了这句话，您需要知道和看到的所有内容都包含在2JS fiddle中，并带有注释。

    解决方案1依赖于给定浏览器的本机"复选框"，尽管有点扭曲…它包含在一个DIV中，这个DIV更容易定位跨浏览器，并带有一个溢出：隐藏以剪切1px拉伸复选框的多余部分(这样您就看不到FF的丑陋边界)。

    简单HTML：(按照链接查看带有注释的CSS，代码块是为了满足stackoverflow)http://jsfiddle.net/kqghj/

    1
    <label><input type="checkbox" /> Label text</label>

    解决方案2使用"checkbox toggle hack"切换DIV的CSS状态，该DIV已在浏览器中正确定位，并使用简单的sprite为复选框unchecked和checked状态设置。所有需要的是调整与上述复选框切换黑客背景位置。在我看来，这是一个更优雅的解决方案，因为您可以更好地控制复选框和收音机，并且可以保证它们在浏览器中看起来是一样的。

    简单HTML：(按照链接查看带有注释的CSS，代码块是为了满足stackoverflow)http://jsfiddle.net/sx5m2/

    1
    <label><input type="checkbox" />Label text</label>

    如果有人不同意这些方法，请给我一个评论，我很乐意听到一些关于为什么其他人没有找到这些解决方案的反馈，或者如果他们有，为什么我在这里看不到关于他们的答案？如果有人看到这些方法中的一个失败了，也会很高兴看到这一点，但是这些方法已经在最新的浏览器中进行了测试，并且依赖于我所看到的相当古老和通用的HTML/CSS方法。

    CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    .threeCol .listItem {
        width:13.9em;
        padding:.2em;
        margin:.2em;
        float:left;
        border-bottom:solid #f3f3f3 1px;
    }
    .threeCol input {
        float:left;
        width:auto;
        margin:.2em .2em .2em 0;
        border:none;
        background:none;
    }
    .threeCol label {
        float:left;
        margin:.1em 0 .1em 0;
    }

    HTML：

    1
    2
            <input type="checkbox" name="name" id="id" value="checkbox1" />
            <label for="name">This is your checkBox</label>

    上面的代码将把您的列表项放在三个代码中，并根据需要更改宽度。

    以下内容提供了跨浏览器(甚至IE9)的像素完美一致性：

    这种方法相当明智，到了显而易见的地步：

  • 创建输入和标签。
  • 将它们显示为块，以便您可以根据需要浮动它们。
  • 将高度和线条高度设置为相同的值，以确保它们居中并垂直对齐。
  • 对于em测量，要计算元素的高度，浏览器必须知道这些元素的字体高度，并且不能在em测量中自行设置。

    • 这就产生了一个全球通用的规则：

    1
    input, label {display:block;float:left;height:1em;line-height:1em;}

    根据窗体、字段集或元素调整字体大小。

    1
    #myform input, #myform label {font-size:20px;}

    在Mac、Windows、iPhone和Android上测试了最新的Chrome、Safari和Firefox。和IE9。

    此方法可能适用于所有不高于一行文本的输入类型。应用类型规则以适应。

    简单的解决方案：

    1
    2
    3
    4
    <label style="display:block">
      <input style="vertical-align:middle" type="checkbox">
      <span  style="vertical-align:middle">Label</span>
    </label>

    IE9的测试在Chrome，Firefox，Safari，9 + +的iOS

    谢谢！这也一直让我发疯。

    在我的特定案例中，这对我很有用：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    input {
        width: 13px;
        height: 13px;
        padding: 0;
        margin:0;
        vertical-align: top;
        position: relative;
        *top: 1px;
        *overflow: hidden;
    }
    label {
        display: block;
        padding: 0;
        padding-left: 15px;
        text-indent: -15px;
        border: 0px solid;
        margin-left: 5px;
        vertical-align: top;
    }

    我正在使用reset.css，它可以解释一些区别，但这对我来说似乎很好。

    position: relative;在IE中存在一些问题，比如z-index和jquery的slideup/slidedown动画。

    CSS：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    input[type=checkbox], input[type=radio] {
        vertical-align: baseline;
        position: relative;
        top: 3px;
        margin: 0 3px 0 0;
        padding: 0px;
    }
    input.ie7[type=checkbox], input.ie7[type=radio] {
        vertical-align: middle;
        position: static;
        margin-bottom: -2px;
        height: 13px;
        width: 13px;
    }

    jQuery：

    1
    2
    3
    4
    5
    6
    $(document).ready(function () {
        if ($.browser.msie && $.browser.version <= 7) {
            $('input[type=checkbox]').addClass('ie7');
            $('input[type=radio]').addClass('ie7');
        }
    });

    根据中使用的字体大小，样式可能需要调整。

    PS：我使用IE7JS让CSS在IE6中工作。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <fieldset class="checks">
        <legend>checks for whatevers</legend>
        <input type="" id="x" />
        <label for="x">Label</label>
        <input type="" id="y" />
        <label for="y">Label</label>
        <input type="" id="z" />
        <label for="z">Label</label>
    </fieldset>

    无论如何，您应该将分组在各自字段集中的表单控件包装在一起，在这里，它将播放wrapa。设置输入/标签显示：块，输入浮动左，标签浮动右，设置宽度，控制左/右边距的间距，相应地对齐标签文本。

    所以

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    fieldset.checks {
        width:200px
    }
    .checks input, .checks label {
        display:block;
    }
    .checks input {
        float:right;
        width:10px;
        margin-right:5px
    }
    .checks label {
        float:left;
        width:180px;
        margin-left:5px;
        text-align:left;
        text-indent:5px
    }

    对于跨浏览器/媒体解决方案，您可能需要同时设置边框、轮廓和线条高度。

    也许有人犯了和我一样的错误？那是…我已经为输入框设置了一个宽度，因为它们大多是"文本"类型，但后来忘记了在复选框中使用该宽度-因此我的复选框试图占用大量的多余宽度，因此很难在其旁边对齐标签。

    1
    2
    3
    4
    5
    6
    7
    .checkboxlabel {
        width: 100%;
        vertical-align: middle;
    }
    .checkbox {
        width: 20px !important;
    }
    1
    2
    <label for='acheckbox' class='checkboxlabel'>
        <input name="acheckbox" id='acheckbox' type="checkbox" class='checkbox'>Contact me</label>

    提供可点击的标签和适当的对齐方式，最早可追溯到IE6(使用类选择器)，最新版本的Firefox、Safari和Chrome中也提供

    这不是解决问题的最佳方式

    1
    vertical-align: middle

    将style="position:relative;top:2px;"添加到输入框将使其向下移动2px。因此，根据您的字体大小，您可以移动它。

    我发现的唯一的方式我可以在线上使用他们的位置是绝对的输入。在与顶尖的扮演了输入变量的结果，我想要的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    div {
      clear:    both;
      float:    none;
      position: relative;
    }

    input {
      left:     5px;
      position: absolute;
      top:      3px;
    }

    label {
      display:     block;
      margin-left: 20px;
    }

    为了与浏览器中的表单字段保持一致，我们使用：框大小：边框框

    1
    2
    3
    4
    5
    button, checkbox, input, radio, textarea, submit, reset, search, any-form-field {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    我发现了一种在几乎所有浏览器中都能得到相同结果的方法。至少是最新的浏览器。它适用于火狐、Chrome、Safari和Opera。在IE中，它看起来几乎就像没有规则适用于输入或标签(也就是说，它的标签仍然比输入低几个像素)，所以我认为它是可以原谅的。

    HTML

    1
    <label class="boxfix"><input type="radio">Label</label>

    CSS

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .boxfix {
        vertical-align: bottom;
    }
    .boxfix input {
        margin: 0;
        vertical-align: bottom;
        position: relative;
        top: 1.999px; /* the inputs are slightly more centered in IE at 1px (they don't interpret the .999 here), and Opera will round it to 2px with three decimals */
    }

    试试这个代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    input[type="checkbox"] {
        -moz-appearance: checkbox;
        -webkit-appearance: checkbox;
        margin-left:3px;
        border:0;
        vertical-align: middle;
        top: -1px;
        bottom: 1px;
        *overflow: hidden;
        box-sizing: border-box; /* 1 */
        *height: 13px; /* Removes excess padding in IE 7 */
        *width: 13px;
        background: #fff;
    }
    1
    2
    3
    input {
        margin: 0;
    }

    实际上是在耍花招

    相关讨论