显示：内联复选框和标签未按预期运行答案

【问题标题】：display: inline on checkbox and label not behaving as expected显示：内联复选框和标签未按预期运行
【发布时间】：2017-11-23 01:36:26
【问题描述】：

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

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

我该如何解决这个问题？

代码在JS Bin

表单是.main-body的子表单

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，并希望了解它，即使我意识到这在我的职业生涯中可能并不重要。

【问题讨论】：

您可以通过将每个复选框放在其关联的标签中来简化您的 HTML。这通常使标签出现在复选框旁边，只有默认样式。例如。 <label><input type="checkbox" id="current-user"> I currently use SuiteLyfe</label>
另外，我很确定“box”不是display 属性的有效选项，因此会被浏览器忽略。您大概打算使用“阻止”。
是的，这就是问题所在！这么愚蠢的错误，但我不是自己捡起来的。谢谢！

标签： html css

【解决方案1】：

将 textarea 显示类型更改为 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;
}

【讨论】：

哦，我现在明白了，我的错！