html - 一个标签中的复选框标题和文本

Question

我一直在尝试为以下(包括垂直对齐)获得合适的样式:

input {
    vertical-align:bottom;
    top:-5px;
}
label {
    display:inline;
}

<label><input type="checkbox"><h6>Header Text</h6> and Label text in one line</label>
<label><input type="checkbox"><h6>Header Text</h6> and Label text in one line</label>
<label><input type="checkbox"><h6>Header Text</h6> and Label text in one line</label>

问题是，在我添加了 <h6> 之后header 标签，它不会再排成一行了。但是我确实需要 <h6>在那里。我最初认为标签宽度不够宽，导致它下降到下方，但即使添加了一个慷慨的 width到 label css，没有任何改变。

还有什么我可以在这里做的吗？

Answer 1

Header元素默认带display:block，需要为h6添加display:inline-block

input {
  vertical-align:middle;
}
label {
  display:block;
}
label h6{
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}

<label><input type="checkbox"><h6>Header Text</h6> and Label text in one line</label>
<label><input type="checkbox"><h6>Header Text</h6> and Label text in one line</label>
<label><input type="checkbox"><h6>Header Text</h6> and Label text in one line</label>