CSS：显示：内联块；答案

【问题标题】：CSS: Display: inline-block;CSS：显示：内联块；
【发布时间】：2019-08-07 07:35:35
【问题描述】：

我有问题。我必须这样做。

但我明白了

我想我必须在某处禁用：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>

【问题讨论】：

将 overflow: hidden 添加到您的 .menu 项目 - 可能的指导 here
将width:100% 添加到nav

标签： html css html-table menu display

【解决方案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>

【讨论】：