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>

你的意思是那样的吗？显示输入旁边的标签（及其可点击的内容）

Answer 2

我修好了！

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

在添加的选项旁边放置复选框

2 个答案: