首页 文章

垂直对齐复选框/标签对[重复]

提问于
浏览
18

这个问题在这里已有答案:

我在Stack Overflow上讨论了这个问题的帖子,但没有什么对我有用 . 我有以下CSS代码垂直对齐复选框/标签对:

body {
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    font-size: 11px;
    margin: 0;
    padding: 0;
}

fieldset {
    line-height: 100%;
}

label {
    display: inline-block;
    vertical-align: baseline;
}

完整的HTML代码是here .

复选框/标签对在Mac OS X下的Safari(5.0.3)和Firefox(3.6.13)中正确垂直居中 . 在Chrome(Mac OS X)上,复选框略微呈现在顶部 . 在Windows操作系统上,复选框和关联标签与底部对齐(在不同的浏览器中一致:Firefox,Safari,Chrome和Internet Explorer 8) .

有人可以解释一下为什么浏览器/操作系统之间会出现这种差异(以及如何避免它们)?

Update

在Mac下Chrome中垂直对齐复选框与标签的黑客攻击如下:

input[type=checkbox] {
    position: relative;
    top: 1px;
}

现在需要实现OS和浏览器特定的条件...

6 回答

  • 2

    不知道为什么浏览器做不同的事情,他们总是这样做 . 就此而言,你试过 display:table-cell; 吗?

  • 13

    另一种方案:

    .checkbox{
    vertical-align:-3px;
    }
    

    注意:很简单 . 但如果标签的字体大小太大,并不总是正常 .

  • 0

    也许 <input> 上的默认边距/填充是搞乱了吗?

  • 1

    这就是我最终做到的方式:

    label input[type=checkbox] {
        margin-top: 5px;
    }
    
  • -3
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="shortcut icon" href="../images/favicon.ico" />
    <style>
    .GlobalEntityComboBox {
        font-family: Verdana;
        font-size: 11px;
        padding: 0px;
        margin: 0px;
        background-color: lightgrey;
        border: 1px solid grey;
        width: 190px;
    }
    .GlobalEntityComboBox li {
        list-style-type: none;
        line-height: 24px;
        padding-left: 4px;
        padding-right: 4px;
        margin-top: 1px;
        margin-bottom: 1px;
    }
    .GlobalEntityComboBox li.checked {
        background-color: lightgreen;
        border-top: 1px solid green;
        border-bottom: 1px solid green;
    }
    .GlobalEntityComboBox input {
        margin: 0px;
        padding: 0px;
        margin-right: 4px;
        vertical-align: middle;
    }
    .GlobalEntityComboBox span {
        vertical-align: middle;
    }
    </style>
    </head>
    <body>
    <ul class="GlobalEntityComboBox">
        <li class="checked"><input type="checkbox" checked/><span>All Servers</span></li>
        <li class="checked"><input type="checkbox" checked/><span>Server 1</span></li>
        <li class="checked"><input type="checkbox" checked/><span>Server 2</span></li>
        <li><input type="checkbox"/><span>Server 3</span></li>
    </ul>
    </body>
    </html>
    
  • 2
    .flcheck-wrapper
    { overflow:hidden;
      margin:5px 0;
    }
    
    .flcheck-wrapper p
    { font-size:12px;
      display:inline;
      float:left;
      line-height:20px;
      margin:0 0 0 10px;
    }
    
    .flcheck-wrapper input[type="checkbox"],
    .flcheck-wrapper input[type="radio"]
    { display:inline;
      float:left;
      margin:0 !imortant;
      line-height:20px;
      height:20px;
    }
    
    <div class="flcheck-wrapper">    
        <input type="radio" name="foo" value="true" checked="checked" />
        <p>Some kind of text</p>
    </div>
    <div class="flcheck-wrapper">    
        <input type="radio" name="foo" value="false" />
        <p>Some kind of text</p>
    </div>
    

相关问题