html - 显示 : inline on checkbox and label not behaving as expected

Question

我想在我的简单网页中放置一个带有标签的复选框，但是当我选择 label 和 checkbox 以更改它们的 display，它们的行为不同。

当复选框设置为内联时，它会向上移动到显示设置为 block 的文本区域的右侧。所以我想我可以将复选框显示设置为 block 并将标签显示设置为内联，标签将移动到 block 的右侧。相反，标签保留在复选框下方，并消除了它与发送按钮之间的任何空白。

我该如何解决这个问题？

密码在JS Bin

表单是 .main-body 的 child

HTML

<form>
  <label for="name-input">Name</label>
  <input type="text" id="name-input">
  <label for="message-input">Message</label>
  <textarea id="message-input"></textarea>
  <input type="checkbox" id="current-user">
  <label for="current-user">I currently use SuiteLyfe</label>
  <input type="submit" value="Send">
</form>

CSS

.main-body {
  display: box;
  width: 600px;
  margin: 0 auto 0 auto;
}
textarea[id=message-input] {
  display: box;
  box-sizing: border-box;
  width: 400px;
  height: 200px;
  margin-bottom: 15px;
  font-size: 14px;
}
input[type=checkbox] {
  display: block;
}
label[for=current-user] {
  display: inline;
}

P.S. 我知道 bootstrap 和其他技术，但现在我正在学习准系统 html 和 css 并希望理解它们，尽管我意识到这对我的职业生涯可能无关紧要。

Answer 1

将文本区域显示类型更改为block，将复选框显示类型更改为inline

textarea[id=message-input] {
  display: block;
  box-sizing: border-box;
  width: 400px;
  height: 200px;
  margin-bottom: 15px;
  font-size: 14px;
}
input[type=checkbox] {
  display: inline;
}