friend 们，很抱歉提出这些恼人的问题，但我并没有真正理解这里的一些东西，我是 HTML/CSS 的新手...
溢出:隐藏在 ul 下{} 如果我不在这里使用它，那么 ul 元素的绿色背景就不会再出现。它用于剪切大于其元素的内容。但是在那个代码中，哪个内容比哪个元素大以至于背景消失了？换句话说，为什么那个 ul 元素的总宽度的背景会因为这些 float 的 li 元素而消失？
显示:内联 block 我想知道这里的内联 block 的意义。我唯一认识到的是，通过在这里使用内联 block ，垂直填充现在可以工作了。那么，如果我使用 block 或内联而不是内联 block ，为什么垂直填充在这里不起作用，我认为无论是内联 block 还是内联 block ，填充都可以在所有方向上工作？
li a:hover, .dropdown:hover .dropdown-btn { li a: hover 是否意味着该代码适用于父级“li直接下的所有“a” >"或者也用于其中的 "a"(它们不直接在父 li 之下，因为它们的父是 div)？ .dropdown:hover .dropdown-btn 究竟是什么意思？
这是 HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li class="dropdown">
<a href="#" class="dropdown-button">Dropdown</a>
<div class="dropdown-menu">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</div>
</li>
</ul>
</body>
和 CSS 文件:
body {
font-family: 'Arial', sans-serif;
max-width: 960px;
margin: 0 auto;
padding: 20px;
}
ul {
list-style-type: none;
margin:0;
padding: 0;
background-color: #1ebb90;
overflow: hidden;
}
li {
float: left;
}
li a, .dropdown-button {
display: inline-block;
color: #ffffff;
text-align: center;
padding: 18px 22px;
text-decoration: none;
最佳答案
首先，我可以帮助处理overflow:hidden。那是因为 css float 指令。
当您float:left 或float:right 几个元素时，它们会并排...但它们也会失去高度。
<div id="wrap">
<div id="boxLeft">Box Left</div>
<div id="boxRight">Box Right</div>
</div>
* {position:relative;box-sizing:border-box;}
#wrap{width:70%;border:2px solid red;}
#boxLeft {background:pink;}
#boxRight{background:palegreen;}
[id^=box]{width:50%;height:40px;padding:30px;text-align:center;}
关于html - 我想了解溢出:hidden and display:inline-block is used here的确切原因，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37288514/