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

我一直在尝试为以下各项（包括垂直对齐）提供合适的样式：

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>标头标记后，它不再进入一行。但是，我确实确实需要在那里的<h6>。我最初以为标签宽度不够宽，这导致它跌落到了下面，但是即使在width css中添加了宽大的label之后，也没有任何改变。

我还能在这里做什么？

最佳答案

标题元素默认为display:block，您需要为display:inline-block添加h6

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>