块元素的宽度由其内容设置？
嗨，我刚刚开始尝试自学HTML / CSS几天前。 我真的不喜欢问问自己的答案编号。 但现在我需要一些帮助，所以我可以找到和平，并最终继续前进。 我试图用一个下拉按钮和链接来制作一个水平菜单。
.container {border:1px solid black;
text-align:left;
border-radius:10px;
overflow:hidden;}
.container a {padding:15px;
display:inline-block;
font-size:30px;
text-decoration:none;
background-color:grey;
color:white;}
.aboutcontainer {display:inline-block;}
.about {position:absolute;
display:none;
width:100%;}
.about a {display:block;
text-align:left;
font-size:20px;
padding:15px 5px;}
.aboutcontainer:hover .about {display:block;}
.container a:hover, .aboutcontainer:hover .button {background-color:red;}
.about a:hover {background-color:lightgrey;}<div class="container">
<a href="#">Home</a
><a href="#">Media</a
><a href="#">Store</a
><div class="aboutcontainer">
<a class="button" href="#">About</a>
<div class="about">
<a href="#">About2</a>
<a href="#">About3</a>
</div>
</div>
</div> 是的，一个inline-block元素将根据其内容来调整大小。
为什么它不适合你的情况？ 你已经.about定位absolute 。
当你绝对地定位一个元素时，你将它从HTML结构中取出，这意味着：
不要留下元素的空间。 相反，将它定位在相对于其最接近的定位祖先的指定位置（如果有的话），或者相对于包含块。 绝对放置的盒子可以有边距，并且不会与其他边缘合并。
MDN文档
这意味着元素被拉出结构， 不再影响周围的元素或其父。
这方面的一个例子：
.parent {
background: blue;
}
.child {
background: red;
position: absolute;
top: 20px;
}Below is the parent element, with a blue background.
<div class="parent">
<div class="child">Bye bye parent</div>
</div>在这里，我删除了overflow: hidden从.container overflow: hidden并添加position: relative对于.aboutcontainer 。
.container {
border: 1px solid black;
text-align: left;
border-radius: 10px;
}
.container a {
padding: 15px;
display: inline-block;
font-size: 30px;
text-decoration: none;
background-color: grey;
color: white;
}
.aboutcontainer {
display: inline-block;
position: relative;
}
.about {
position: absolute;
display: none;
width: 100%;
}
.about a {
display: block;
text-align: left;
font-size: 20px;
padding: 15px 5px;
}
.aboutcontainer:hover .about {
display: block;
}
.container a:hover,
.aboutcontainer:hover .button {
background-color: red;
}
.about a:hover {
background-color: lightgrey;
}<div class="container">
<a href="#">Home</a
><a href="#">Media</a
><a href="#">Store</a
><div class="aboutcontainer">
<a class="button" href="#">About</a>
<div class="about">
<a href="#">About2</a>
<a href="#">About3</a>
</div>
</div>
</div>