Question

我的 p 标签直接出现在我的复选框输入之后，但我无法将它们放在同一行并且彼此相邻。

// CHECK FOR DUPLICATE USER ACCOUNT
router.post("/api/verification/check-for-duplicate-user", auth, async 
(req, res) => {

    try {
      const duplicates = await User.find(
        { DOB: req.body.DOB, lastName: req.body.lastName },
        function (err, result) {
          if (err) {
            console.log(`ERROR ${err}`)
          } else {
            console.log(`FOUND DUPLICATES`)
          }
        }
      )

      if (duplicates) {
        return res.send(duplicates)
      }
    } catch (err) {
      res.status(400).send()
    }
  }
)

Answer 1

我假设您的代码看起来像那样。

.checkbox_div {
  display: flex;
  align-items: center;
}

.checkbox_div p {
  display: inline-block;
}

<div class="checkbox_div">
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <p>Paragraph text </p>
</div>

如果不是，那么格式化您的代码看起来像这样。在 div 中获取复选框输入和 p 标签。然后添加一些下面给出的css。

Answer 2

如果您按照类名建议使用 Bootstrap，这是正确的方法：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
        <label class="form-check-label" for="defaultCheck1">
          Save my card for future payment
        </label>
      </div>
   </div>
</div>

请参阅 https://getbootstrap.com/docs/4.6/components/forms/#checkboxes-and-radios 处的文档。

如果没有，请使用标准复选框标记，以便使用辅助技术（和更标准）的人可以访问您的表单：

<label>
    <input type="checkbox">
    Save my card for future payment
</label>

请注意，在这两种情况下，标签都是可点击的。

如何确保我的段落与复选框保持在同一行？

2 个答案: