Question

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

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

我该如何解决这个问题？

代码位于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;
}

PS 我知道引导程序和其他技术，但是现在我正在学习准系统html和css，并希望了解它，即使我意识到这可能对我的职业生涯无关紧要。< / p>

Answer 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;
}

显示：内联复选框和标签不符合预期

HTML

CSS

1 个答案: