如何在html设计界面加线？

Question

我正在尝试设计我的界面。但不知何故，我生产它产生了我想要的错误输出。我想不通为什么会这样。

我的界面：

我想做的界面：

welcome.blade.php

 <div class="w-100 h-100 d-flex justify-content-center align-items-center">
        <div class="w-50">
         <h1 class="display-2 text-white"> Task App </h1>
         <h2 class="text-white pt-5"> Next Task? </h2>
            <form action="{{route('task.store')}}" method="POST">
                @csrf
              <div class="input-group mb-3 w-100">
                <input type="text" class="form-control form-control-lg" name="title" placeholder="Type here..." aria-label="Recipient's username" aria-describedby="button-addon2">
                <div class="input-group-append">
                    <button class="btn btn-success" type="submit" id="button-addon2">Add your task</button>
                <div>
              <div>
            </form>
            <h2 class="text-white pt-2"> My Task List:</h2>
        </div>
    </div>

Answer 1

首先，如果您的代码片段是您的实际代码，那么您的 HTML 语法无效。一些 <div> 标签没有关闭。我修复了它，一切看起来都是正确的。

#main-div {
 background: #555;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="w-100 h-100 d-flex justify-content-center align-items-center" id="main-div">
  <div class="w-50">
    <h1 class="display-2 text-white"> Task App </h1>
    <h2 class="text-white pt-5"> Next Task? </h2>
    
    <form action="{{ route('task.store') }}" method="POST">
      <div class="input-group mb-3 w-100">
        <input type="text"
               class="form-control form-control-lg">
        <div class="input-group-append">
          <button class="btn btn-success" 
                  type="submit">
            Add your task
          </button>
        </div>
      </div>
    </form>
    <h2 class="text-white pt-2"> My Task List:</h2>
  </div>
</div>

如何在html设计界面加线？

How to add line in html designing interface?

html

css

interface

laravel