web-dev-qa-db-ja.com

垂直位置合わせチェックボックス/ラベルのペア

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 OSでは、チェックボックスと関連するラベルが下に揃えられます（Firefox、Safari、Chrome、およびInternet Explorer 8のさまざまなブラウザーで一貫して）。

ブラウザー/ OS間でこの違いが発生する理由（およびそれらを回避する方法）を誰かが説明してくれませんか？

更新

MacでChromeのチェックボックスをラベルに垂直に配置するハックは次のとおりです。

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

OSとブラウザ固有の条件を実装する必要があります...

htmlcsscross-browsercross-platformvertical-alignment
20
Andrej

別の解決策：

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

注：それは簡単です。ただし、ラベルのフォントサイズが大きすぎる場合は、常に正常に機能するとは限りません。

13
Fmy

これが私が最後にやった方法です：

label input[type=checkbox] {
    margin-top: 5px;
}
2
llundin

多分<input>のデフォルトのマージン/パディングは混乱していますか？

2
Neil
<!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>
1
Anik
.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>
0
Phil Jackson