Question

您好我几天前刚开始尝试自学HTML / CSS。我真的不喜欢寻求答案，而不是自己想出来。但现在我需要一些帮助，所以我可以找到和平，最后继续前进。我试图用一个下拉按钮和链接制作一个水平菜单。

＆＃13;

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

＆＃13;

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

＆＃13;

我无法弄清楚如何使下拉菜单自动与下拉按钮的宽度相同。我想也许宽度为100％的下拉菜单（.about）会延伸到包含在（.aboutcontainer）中的div，它显示为内联块，其宽度由＆＃34决定;关于＆＃34;内部的文本链接。但是显示的下拉菜单会显示屏幕的整个长度。因此，内联：块元素内的实际内容似乎不会定义该元素的宽度。虽然inline：block元素的边框自动包裹其内容，但它只是一个错觉，它的实际宽度实际上是屏幕的全长，如果没有在任何父div中定义固定宽度（希望我使用正确的术语）。那么有没有办法在没有分配任何固定宽度的情况下做到这一点？如果没有那就没问题。我终于有了答案，知道我想做什么是不可能的，不要再浪费时间了。

Answer 1

在此，我从overflow: hidden删除了.container，并将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结构中取出它，这意味着：

不要为元素留出空间。相反，将其定位在相对于其最近定位的祖先的指定位置（如果有的话），或相对于包含块。绝对定位的盒子可以有边距，并且它们不会与任何其他边缘一起折叠 <子> 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;：

此关键字列出了所有元素，就好像元素没有定位一样，然后调整元素的位置，而不改变布局（从而为元素留下一个间隙，如果它没有被定位）。 position：relative对表 - * - group，table-row，table-column，table-cell和table-caption元素的影响未定义。

相对定位意味着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>

您会在上面的代码段中注意到，我们必须从overflow:hidden中移除.container。这是因为现在该元素绝对定位在其父元素中，当它从.container溢出时会被隐藏。您已应用overflow:hidden，因此结束元素不会突出于border-radius，因此我只是将border-radius添加到第一个元素。

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

2 个答案: