将复选框对齐到文本的左上角

Question

我有这个简单的HTML代码：

<div id="parent">
     <input type="checkbox" />
     <div id="child">Sample checkbox text on the way</div>
</div>

这个CSS：

input {
   width: 10%;
   display: inline-block;
   font-size:16px;
   margin: 0;
   padding: 0;
}
#child {
   width: 88%;
   display: inline-block;
}
#parent {
   width: 240px;
}

复选框与文本的左下角对齐。如何让它与左上角对齐呢？与浮动效果相似。

我为你做了一个jsfiddle： http://jsfiddle.net/zm9onLxf/2/

Answer 1

您需要简单地将以下CSS添加到样式表中，以便将checkbox与文本完美对齐：

input {
    vertical-align: middle;
}
#child {
    vertical-align: top;
}

---

input {
    width: 10%;
    display: inline-block;
    font-size:16px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}
#child {
    width: 88%;
    display: inline-block;
    vertical-align: top;
}
#parent {
    width: 240px;
}

<div id="parent">
    <input type="checkbox" />
    <div id="child">Sample checkbox text on the way</div>
</div>

Answer 2

将vertical-align: top;添加到input - DEMO

input {
    width: 10%;
    display: inline-block;
    font-size:16px;
    margin: 0;
    padding: 0;
    vertical-align: top;
}
#child {
    width: 88%;
    display: inline-block;
}
#parent {
    width: 240px;
}

<div id="parent">
    <input type="checkbox" />
    <div id="child">Sample checkbox text on the way</div>
</div>