内嵌块元素宽度是否通过其内容设置？

Question

嗨，我刚刚开始尝试自学HTML/CSS几天前。我真的不喜欢问问自己的答案编号。但现在我需要一些帮助，所以我可以找到和平，并最终继续前进。我试图用一个下拉按钮和链接来制作一个水平菜单。

.container {border:1px solid black; 
 
      text-align:left; 
 
\t \t \t border-radius:10px; 
 
\t \t \t overflow:hidden;} 
 
\t \t \t 
 
.container a {padding:15px; 
 
       display:inline-block; 
 
\t \t \t font-size:30px; 
 
\t \t \t text-decoration:none; 
 
\t \t \t background-color:grey; 
 
\t \t \t color:white;} \t \t \t 
 

 
.aboutcontainer {display:inline-block;} 
 
\t \t \t 
 
.about {position:absolute; 
 
     display:none; 
 
     width:100%;} \t \t 
 

 
.about a {display:block; 
 
      text-align:left; 
 
\t \t font-size:20px; 
 
\t \t 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>

我无法弄清楚如何使下拉菜单自动相同宽度的下拉按钮。我认为，宽度为100％的下拉菜单（.about）可能会延伸至包含在（.aboutcontainer）中的div，该宽度将显示为内联块，其宽度由“关于”文本链接在里面。但下拉菜单显示时会显示整个屏幕。因此，inline：block元素中的实际内容似乎不会定义该元素的宽度。尽管inline：block元素的边框会自动包裹它的内容，但如果在父div中没有​​定义任何固定宽度，它只是一个错觉，它的实际宽度实际上是整个屏幕的长度（希望我使用正确的术语）。那么有没有办法做到这一点，没有任何固定的宽度分配？如果没有，那就好了。我终于有了答案，并且知道即将做的事情是不可能的，并且不要浪费时间。

Answer 1

是的，一个inline-block元素将大小以适合其内容。

为什么它不能在你的情况下工作？您有.about定位absolute。

当你绝对位置的元素，你正在服用它的HTML结构，这意味着：

不要为元素留出空间。相反，将它定位在相对于其最接近的定位祖先的指定位置（如果有的话），或者相对于包含块。绝对放置的盒子可以有边距，并且不会与其他边缘合并。
_{MDN Docs}

这意味着该元件被拉出的结构，和不再影响周围的元件，或者它的父。

这样的一个例子：

.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>

如果你运行上面的片段中，你看不到父母或它的蓝色背景可言，因为子元素已经放置在它外面，并相对于视口。

现在回到你的问题。我们如何才能使绝对定位的元素相对于其父项而不是视口进行定位？

答案是非常简单：position:relative;上的父：

此关键字勾画出的所有元素，就好像元件未定位，并且然后调整元件的位置，而不改变布局（并且因此离开如果它没有定位的话，元素的缺口）。位置：相对于表的效果 - * - 组，表行，表列，表格单元和表标题元素未定义。

相对定位意味着absolute子元素将相对于父元素进行定位。尽管absolute仍然会将元素拉出HTML结构，并且它仍然不会影响周围元素或其父元素，但absolute元素现在将受其父项的影响。所以，你的情况，设置宽度为100％会.aboutcontainer小号宽度的100％，而不是视口宽度的100％：

.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; 
 
} 
 
.container>a:first-of-type { 
 
    border-radius: 10px 0 0 10px; 
 
} 
 
.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>

你会在上面的代码片段通知，我们必须从.container删除overflow:hidden。这是因为现在元素完全位于其父元素中，当它从.container溢出时，它会被隐藏。您已应用overflow:hidden，因此末端元素不会超出边界半径，因此我只是为第一个元素添加了边界半径。

Answer 2

在这里，我从.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>