网格中的第 5 个容器没有像其他容器那样遵循对齐方式 - 为什么？

Question

我一直在创建这一页，使用容器和网格将每一行分开，原因只有请求者知道。我现在看到的是，前 4 个容器完美对齐，但当我尝试添加第 5 个容器时，它位于右侧，直接位于第 4 个容器的顶部。

我必须添加很多 <br> 才能使其位于第 4 个容器下方，正如您在此代码笔上看到的那样：https://codepen.io/nyxerian/pen/wvoPMoz，前 4 个容器是在 margin-left:255px; 但第 5 个容器甚至没有那个属性，我不得不减少容器本身的长度，这样它就不会向右滚动。它现在所在的位置似乎是页面的 'start'，我不明白为什么。

我在下面添加了我的代码以及任何关于如何对齐它们的见解，以及实际问题是什么，这将是最有帮助的。

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>

        <link rel="stylesheet" href="appOutcome.css">
        <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
        <script src="https://use.fontawesome.com/releases/v5.15.2/js/all.js"></script>
    </head>
    <body>
    <!-- start: SIDEBAR NAV AND HEADER -->
    <div class='fixed header'>
      <i class="far fa-bell" style="float: right; height: 35px; width: 35px; margin-top: 25px; margin-right: 80px; color: white;"></i>
      <i class="far fa-comments" style="float: right; height: 35px; width: 35px; margin-top: 25px; margin-right: 20px; color: white;"></i>
    </div>
    <div class='fixed side'>
        <img class="smartlogo" src="PNG1.png" alt="smart">
        <nav class="sidebar">
            <div class="text"></div>
            <br>
            <ul>
              <li class="active"><a href="#"><i class="fas fa-home" style="color:#2DAAD6;"></i>&#8287;&#8287;&#8287;Home</a></li>
              <li><a href="#"><i class="far fa-handshake fa-fw" style="color: #2DAAD6;"></i>&#8287;&#8287;&#8287;Sell</a></li>
              <li><a href="#"><i class="fas fa-chart-line" style="color: #2DAAD6;"></i>&#8287;&#8287;&#8287;Dashboards</a></li>
              <li><a href="#"><i class="fas fa-boxes" style="color: #2DAAD6;"></i>&#8287;&#8287;&#8287;Inventory</a></li>
              <li><a href="#"><i class="far fa-credit-card" style="color: #2DAAD6;"></i>&#8287;&#8287;&#8287;Payments</a></li>
              <li>
                <a href="#" class="lead-btn"><i class="far fa-folder-open" style="color: #2DAAD6;"></i>&#8287;&#8287;&#8287;Leads</a>
                <ul class="lead-show">
                  <li><a href="#">Referrals</a></li>
                  <li><a href="#"></i>Management</a></li>
                  <li><a href="#">Settings</a></li>
                </ul>
              </li>
              <li><a href="#"><i class="fas fa-users" style="color: #2DAAD6;"></i>&#8287;&#8287;&#8287;Teams</a></li>
              <li><a href="#"><i class="far fa-clipboard" style="color: #2DAAD6; margin-left: 7px;"></i>&#8287;&#8287;&#8287;Reporting</a></li>
              <li><a href="#"><i class="fas fa-tools" style="color: #2DAAD6;"></i>&#8287;&#8287;&#8287;Settings</a></li>
            </ul>
          </nav>
    </div>
    <div class='scrollable'></div>  

     <!-- start: Bubble header -->

    <div class="bubbleBar1">
        <img class="bubbleBar1" src="/Leads/3. Leads Management - Qualifications/Qualifications - Appointment Outcome/bubbleBar2.1.png">
        <br>
    </div>
    <div class="bubbleHeadings">
        <div class="wrapper">
            <div class="box">
                <p>Qualifications</p>
            </div>
            <div class="box">
                <p>Working</p>
            </div>
            <div class="box">
                <p>Converted</p>
            </div>
        </div>
    </div>
     <!-- start: content -->
    <br><br>
<form>    <div class="refInfo">
        <div class="wrapper2">
            <div class="box1">
                <p style="width: 150px;">Name & Surname</p>
                <input type="text" class="fullName">
            </div>
            <div class="box2">
                <p>Number</p>
                <input type="text" class="mobileNum">
            </div>
            <div class="box3">
                <p>Suburb</p>
                <input type="text" class="suburb">
            </div>
            <div class="box4">
                <p>City</p>
                <input type="text" class="city">
            </div>
        </div>
    </div>
    <div class="outcomeInfo">
        <div class="wrapper3">
            <div class="box5">
                <p>Date Contacted</p>
                <input>
            </div>
            <div class="box6">
                <p>Call Outcome</p>
                <input>
            </div>
            <div class="box7">
                <p>Comments</p>
                <textarea name="commentNotes" id="commentNotes" rows="3" cols="30"></textarea>
            </div>
            
        </div>
    </div>
</form>
<br>
<form>
    <div class="appInfo">
        <div class="wrapper4">
            <div class="box8">
                <p>Appointment Date</p>
                <input type="date" class="appDate" style="width: 160px;">
            </div>
            <div class="box9">
                <p>Time</p>
                <input type="time" class="appTime" style="width: 160px;">
            </div>
            <div class="box10">
                <p>Address</p>
                <textarea name="address" id="address" rows="3" cols="30"></textarea>
            </div>
            <div class="box">
            
        </div>
    </div>
</form>
<br>
<form>
    <br><br><br><br><br><br>  <!-- Mass breaks to get it below the 4th container -->
    <div class="appResult">
        <div class="wrapper5">
            <div class="box11">
                <p>Appointment Result</p>
                <select name="appOutcome" id="appOutcome" style="width: 165px; height: 24px;">
                    <option value="select">Select an Option</option>
                    <option value="purchase">Purchase</option>
                    <option value="reschedule">Reschedule Appointment</option>
                    <option value="notInterested">Not Interested</option>
                </select>
            </div>
            <div class="box">

            </div>
            <div class="box">
                
            </div>
            
            <div class="box12">
                <div class="updateBtn">
                    <div class="updateBtn">
                      <button class="updateBtn">Update</button>
                    </div>
                </div>
</form>


        

        <script>
            $('.lead-btn').click(function () {
            $('nav ul .lead-show').toggleClass('show')
            $('nav ul .first').toggleClass('rotate')
          })     
          
          $('nav ul li').click(function () {
            $(this).addClass('active').siblings().removeClass('active')
          })
        </script>
    </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {
  margin: 0;
  padding: 0;
  user-select: none;
  box-sizing: border-box;
  font-family: 'nordstern', Helvetica;
}
/* ENSURING SCOLLABLE PAGE */
.scrollable {
  width: 100%;
  margin: 100px auto;
}

.fixed {
  position: fixed;
}

/*HEADER AND SIDEBAR */

.header {
  top: 0;
  left: 0;
  right: 0;
  height: 80px;

  background-image: linear-gradient(
    to right,
    #436c89,
    #6ca1cd,
    #60b9c0
  ) !important;
}

.smartlogo {
  width: 140px;
  height: 45px;
  margin-left: 40px;
  margin-top: 28px;
}

.side {
  top: 0;
  left: 0;
  bottom: 0;
  width: 240px;
  background-color: #e7e6e6;
}
.sidebar {
  height: 80%;
  width: 240px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #e7e6e6;
  margin-top: 85px;
}
.sidebar.show {
  left: 0px;
}
.sidebar .text {
  color: black;
  font-size: 25px;
  font-weight: 600;
  line-height: 65px;
  text-align: center;
  justify-content: left;
  background: #e7e6e6;
  letter-spacing: 1px;
  font-family: nordstern
}
nav ul {
  background: #e7e6e6;
  height: 100%;
  width: 100%;
  list-style: none;
}
nav ul li {
  line-height: 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
nav ul li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
nav ul li a {
  position: relative;
  color: black;
  text-decoration: none;
  font-size: 18px;
  padding-left: 40px;
  font-weight: 500;
  display: block;
  width: 100%;
  border-left: 3px solid transparent;
}
nav ul li.active a {
  color: black;
  background: #e7e6e6;
  border-left-color: #60b9c0;
}
nav ul li a:hover {
  background: #ffffff;
}
nav ul ul {
  position: static;
  display: none;
}
nav ul .lead-show.show {
  display: block;
}
nav ul .serv-show.show1 {
  display: block;
}
nav ul ul li {
  line-height: 42px;
  border-top: none;
}
nav ul ul li a {
  font-size: 17px;
  color: #e6e6e6;
  padding-left: 80px;
}
nav ul li.active ul li a {
  color: Black;
  background: #e7e6e6;
  border-left-color: transparent;
}
nav ul ul li a:hover {
  color: black !important;
  background: #ffffff !important;
}
nav ul li a span {
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  font-size: 22px;
  transition: transform 0.4s;
}
nav ul li a span.rotate {
  transform: translateY(-50%) rotate(-180deg);
}

/* BUBBLEBAR IMAGE STYLE  */

.bubbleBar1 {
    margin-left: 200px;
}

/* BUBBLE WORDING */

.bubbleHeadings {
    margin-left: 255px;
    display: flex;
    justify-content: left;
    width: 1250px;
    height: 35px;
    align-items: baseline;
    background: white;
}

.wrapper {
    width: 180px;
    margin-left: 170px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap:355px
}

/*----------------------Referral Information container-----------------------------------*/

.refInfo {
  margin-left: 255px;
  display: flex;
  justify-content: left;
  width: 1260px;
  height: 120px;
  align-items: baseline;
  background: #F2F2F2;
}

.wrapper2 {
  margin-top: 30px;
  width: 150px;
  margin-left: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 150px;
}

/*-----------------------Call Outcome container------------------------------------------*/

.outcomeInfo {
  margin-left: 255px;
  display: flex;
  justify-content: left;
  width: 1260px;
  height: 120px;
  align-items: baseline;
  background: #F2F2F2;
}

.wrapper3 {
  margin-top: 30px;
  width: 150px;
  margin-left: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 150px;
}

/*----------------------Appointment Date Container------------------------------------------*/

.appInfo {
    margin-left: 255px;
    display: flex;
    justify-content: left;
    width: 1260px;
    height: 120px;
    align-items: baseline;
    background: #F2F2F2;
  }
  
  .wrapper4 {
    margin-top: 30px;
    width: 150px;
    margin-left: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 150px;
  }

  /*-----------------------Appointment Result Container------------------------------------------*/

.appResult {
    display: flex;
    justify-content: left;
    width: 1090px;
    height: 120px;
    align-items: baseline;
    background: #F2F2F2;
}

.wrapper5 {
    margin-top: 30px;
    width: 150px;
    margin-left: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 150px;
}


/* Enter and update Button Styling */


.updateBtn {
    float: right;
    margin-left: 50px;
    width: 150px; 
    border-radius: 15px; 
    height: 35px; 
    border: none;
    color: white;
    background-color: #2DAAD6;
  }
  
  .updateBtn button:hover {
    background-color: #60b9c0;
  }

.box12 {
    margin-left: 195px;
}

Answer 1

我认为您的问题来自这样一个事实，即 HTML 层次结构会影响哪个元素作为容器或作为项目与哪个元素相关。

在您的情况下，您在 CSS (.appResult) 中评论为“第 5 个容器”的是 form 元素的 child，它本身是 appInfo 的 child。

所以 appInfo 有一个具有默认行方向的 display: flex;。所以它的2children（.wrapper4和持有.appResult的form）水平相邻是正常的。

你所说的容器被放置在 HTML 层次结构中，这样它们就不会彼此相邻，它们被其他 parent 元素分开，它们彼此不相关网格显示。

要让“第 5 个容器”位于下方而不是右侧，您可以更改弹性容器的方向，即 parent:

.appInfo {
  flex-direction: column;
}

或者您必须重新深入思考您的 HTML 层次结构。

网格中的第 5 个容器没有像其他容器那样遵循对齐方式 - 为什么？

5th Container in a grid is not following alignment as the others - why?

html

css

gridview

flexbox