Question

好的，这是交易，我需要理解为什么我的.login表单没有放在其父（header标签）内，或者甚至是我创建的另一个父div，只是为了看看它是否会进入div（.header）。我完全不了解子元素如何陷入单独的类（.home-main-nav-menu）。有人可以告诉我这里发生了什么以及如何解决它？感谢您的时间！

Review CSS for color map

$(document).ready(function(){
    $('.main-ul').children('li').on('click', function() {
     $(this).children('ul').slideToggle('slow');
   });
});

.home-main-nav-menu{
  border-style: double;
  border-color: cyan;
}
.login{
  font-family: Ailerons;
  float: right;
  border-style: double;
  border-color: red;
}
.header{
  border-style: double;
  border-color: yellow;
}
header{
  border-style: double;
  border-color: blue;
}
h1{
  font-family: Ailerons;
  font-size: 100px;
  color: white;
  text-align: center;
  margin-bottom: -25px;
}
.main-li-items{
  display: inline-block;
  border-style: double;
  border-color: purple;
  padding-left: 0px;
}
.sub-li-items{
  list-style-type: none;
  text-align: left;
  margin-left: -40.5px;
  border-style: double;
  border-color: yellow;
}
.main-li-items > ul {
  display: none;
  position: absolute;
  margin-left: -4.1px
}
.main-ul{
  border-style: double;
  border-color: green;
  padding-left: 0;
}
ul{
  text-align: center;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>

<body>
  <div class = "header">
  <header>
    <h1>Header</h1>
    <form class = "login">
      Username <input type = "text" name= "username"></br/>
      Password <input type = "text" name ="password"><br/>
      <input type="submit" name= "submit" value="submit" id = "submit">
    </form>
  </header>
</div>
    <nav class = "home-main-nav-menu">
    <ul class = "main-ul">
      <li class = "main-li-items"><a href = "#/">Home</a></li>
      <li class = "main-li-items"><a href = "#/">About Me</a>
        <ul>
          <li class = "sub-li-items"><a href = "#/">Education</a></li>
          <li class = "sub-li-items"><a href = "#/">Lessons</a></li>
        </ul>
      </li>
      <li class = "main-li-items"><a href = "#/">Blog</a></li>
      <li class = "main-li-items"><a href = "#/">Contact</a>
      <ul>
        <li class = "sub-li-items"><a href = "#/">Email</a></li>
        <li class = "sub-li-items"><a href = "#/">Phone</a></li>
      </ul>
    </li>
      <li class = "main-li-items"><a href = "#/">Portfolio</a>
      <ul>
        <li class = "sub-li-items"><a href = "#/">Recent</a></li>
        <li class = "sub-li-items"><a href = "#/">All</a></li>
      </ul>
     </li>
      <li class = "main-li-items"><a href = "#/">Collaborate</a>
      <ul>
        <li class = "sub-li-items"><a href = "#/">Now</a></li>
        <li class = "sub-li-items"><a href = "#/">Later</a></li>
      </ul>
      </li>
    </ul>
</nav>

Answer 1

因为你浮动了form.login。要解决您的问题，请添加overflow：auto to .header

或者更好地使用它：

header::after {
    content: "";
    clear: both;
    display: table;
}

看看这个：https://laravel.com/docs/5.4/eloquent

父母的子元素根本不作为子元素显示

1 个答案: