我有一个问题。我必须这样做。
但是我明白了
我想我必须在某处禁用: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>最佳答案
您可以使用 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>关于html - CSS:显示:内联 block ；，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55195868/