Question

我有问题。我必须这样做

但是我明白了

我认为我必须在某处禁用：display: inline-block，但是在我尝试过的所有地方都无效？有谁知道如何使它们一个接一个？第一个框是菜单，第二个表。也就是说，我必须将桌子放在菜单下。但是如何？

body {
  
}

.menu {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.menu-item {
  background: cornsilk;
  color: crimson;
  margin-left: 20px;
  margin-right: 20px;
  text-align: center;
  float: left;
  border-style: solid;
  border-width: 5px;
  border-color: black;
}

.menu-item a {
  text-decoration: none;
  color: crimson;
  font-weight: bold;
  padding: 20px;
  width: 80px;
  display: inline-block;
}

.menu-item a:hover {
  background: crimson;
  color: cornsilk;
}

section {
  display: inline-block;
}

article {
  width: 160px;
  background: whitesmoke;
  padding: 20px;
  margin: 20px;
  display: inline-block;
  vertical-align: top;
  float: left;
}

aside {
  width: 160px;
  display: inline-block;
  vertical-align: top;
  background: whitesmoke;
  float: left;
  padding: 20px;
  margin: 20px;
}

.text {
  margin-top: 10px;
  font-size: 19px;
  margin-bottom: 10px;
  background: whitesmoke;
}

<body bgcolor="cadetblue">
<nav>
  <ul class="menu">
    <li class="menu-item">
      <a href="#"> Link 1 </a>
    </li>
    <li class="menu-item">
      <a href="#"> Link 2 </a>
    </li>
    <li class="menu-item">
      <a href="#"> Link 3 </a>
    </li>
    <li class="menu-item">
      <a href="#"> Link 4 </a>
    </li>
    <li class="menu-item">
      <a href="#"> Link 5 </a>
    </li>
  </ul>
</nav>
<section>
  <article>
    <div class="text"> This is the left column </div>
    <img src="http://placehold.it/150x150">
  </article>
</section>
<section>
  <aside>
    <div class="text"> This is the right column </div>
    <img src="http://placehold.it/150x150">
  </aside>
</section>
</body>

Answer 1

对于clear: both，您可以使用menu::after将元素向下移动，如下所示：

body {
  
}

.menu {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.menu::after {
  content: "";
  display: table;
  clear: both;
}

.menu-item {
  background: cornsilk;
  color: crimson;
  margin-left: 20px;
  margin-right: 20px;
  text-align: center;
  float: left;
  border-style: solid;
  border-width: 5px;
  border-color: black;
}

.menu-item a {
  text-decoration: none;
  color: crimson;
  font-weight: bold;
  padding: 20px;
  width: 80px;
  display: inline-block;
}

.menu-item a:hover {
  background: crimson;
  color: cornsilk;
}

section {
  display: inline-block;
}

article {
  width: 160px;
  background: whitesmoke;
  padding: 20px;
  margin: 20px;
  display: inline-block;
  vertical-align: top;
  float: left;
}

aside {
  width: 160px;
  display: inline-block;
  vertical-align: top;
  background: whitesmoke;
  float: left;
  padding: 20px;
  margin: 20px;
}

.text {
  margin-top: 10px;
  font-size: 19px;
  margin-bottom: 10px;
  background: whitesmoke;
}

<body bgcolor="cadetblue">
<nav>
  <ul class="menu">
    <li class="menu-item">
      <a href="#"> Link 1 </a>
    </li>
    <li class="menu-item">
      <a href="#"> Link 2 </a>
    </li>
    <li class="menu-item">
      <a href="#"> Link 3 </a>
    </li>
    <li class="menu-item">
      <a href="#"> Link 4 </a>
    </li>
    <li class="menu-item">
      <a href="#"> Link 5 </a>
    </li>
  </ul>
</nav>
<section>
  <article>
    <div class="text"> This is the left column </div>
    <img src="http://placehold.it/150x150">
  </article>
</section>
<section>
  <aside>
    <div class="text"> This is the right column </div>
    <img src="http://placehold.it/150x150">
  </aside>
</section>
</body>

CSS：显示：内联块；

1 个答案: