行内块元素的宽度是否由其内容设置？

Question

嗨，几天前我才开始尝试自学 HTML/CSS。我真的不喜欢问答案，而是自己想办法。但现在我需要一些帮助，这样我才能找到平静并最终继续前进。我正在尝试制作一个带有一个下拉按钮和 link 的水平菜单。

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

我不知道如何使下拉菜单自动与下拉按钮宽度相同。我想也许具有 width:100% 的下拉菜单 (.about) 会延伸到它包含在 (.aboutcontainer) 中的 div，它显示为内联块，其宽度为由里面的 "About" text-link 决定。但是下拉菜单在显示时会占据整个屏幕的长度。因此， inline:block 元素内的实际内容似乎不会定义该元素的宽度。尽管 inline:block 元素的边框会自动环绕其内容，但这只是一种错觉，如果没有在任何父元素中定义固定宽度，则它的实际宽度实际上是屏幕的全长 divs（希望我使用正确的术语）。那么有没有办法在没有分配任何固定宽度的情况下做到这一点？如果没有，那没关系。我终于得到了我的答案，并且知道我试图做的事情是不可能的，不要再浪费时间了。

Answer 1

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

Answer 2

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

为什么它在您的情况下不起作用？您 .about 定位 absolute.

当你绝对定位一个元素时，你将它从 HTML 结构中取出，意思是：

Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the containing block. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.
_{MDN Docs}

这意味着该元素被拉出结构，并且不再影响周围的元素，或其parent。

这方面的一个例子：

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

如果你运行上面的代码片段，你看不到 parent 或根本看不到蓝色背景，因为 child 元素已被定位在它之外，并且相对于视口。

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

答案极其简单：position:relative; 上 parent:

This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.

相对定位意味着 absolute child 元素将相对于 parent 定位。虽然 absolute 仍然会将元素拉出 HTML 结构，并且它仍然不会影响周围的元素或其 parent，但 absolute 元素现在将是 受其parent的影响。因此，在您的情况下，将宽度设置为 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。这是因为现在该元素绝对定位在其 parent 元素内，当它从 .container 溢出时它会被隐藏。您已应用 overflow:hidden，因此结束元素不会超出 border-radius，因此我只是将 border-radius 添加到第一个元素。

行内块元素的宽度是否由其内容设置？

Do inline-block elements widths get set by their content?

html

css

width

navbar