html - 将复选框放在添加的选项旁边

Question

现在我在 html 中使用的代码是:

<label name="diet" for="">Dieet:</label>
  @foreach($diets as $diet)
      <p> {{ $diet->titel }} </p>

      <input type="checkbox" id="diet[]" for="diet[]" name="diet[]" value="{{ $diet->id }}" class="dieet{{ $diet->id }}">

在CSS中代码是

#form_new_recipe


    {
        margin: 0 auto;
        max-width:min-content;
        color: white;

        label{
            display: block;
        }

        input, textarea{
        margin-top:20px;
        margin-bottom:20px;
        display: block;
        }

        input[type="text"], textarea{
            margin-top:20px;
            margin-bottom:20px;
            display: block;
            width: 600px;
        }
    }

所以我的问题是:如何查看添加的选项旁边的复选框？ (它与后端开发人员合作)

还有一些可能更难的事情，我想将添加的选项彼此水平对齐(在一定程度上)

Answer 1

<label name="diet" for="">Dieet:</label>
  @foreach($diets as $diet)
<label><input type="checkbox" id="diet[]" for="diet[]" name="diet[]" value="{{ $diet->id }}" class="dieet{{ $diet->id }}">{{$diet->titel}}</label>

你是这个意思吗？在输入旁边显示标签(并且它也是可点击的)