h3标题旁边的内联复选框

Question

我正在尝试将一个简单的复选框内联到标题的左侧，我尝试添加如下所示的内联css，但它仍然会对齐。

 <input type="checkbox" style="display:inline"/><h3>Header Text</h3>

我有一个我希望用户选择的列表，因此为什么我希望每个列表旁边都有复选框。

Answer 1

默认情况下，h3元素是一个块元素（即100％宽度，因此它不适合该行上的任何其他内容）

将其更改为内联块，您将看到它应该正常工作（这也意味着您可以删除复选框的内联样式）：

h3 {
  display: inline-block;
}

<input type="checkbox" />
<h3>Header Text</h3>

Answer 2

h3标记占用整个宽度，您必须将CSS样式设置为h3，无需设置复选框。

以下代码可以帮助您

<input type="checkbox"/><h3 style="display:inline">Header Text</h3>