Question

在以下示例中，<div>小于其内容为什么？我该如何解决？

＆＃13;

.switcher {
  border: 1px dashed green;
}

.switcher a {
  padding: 30px;
  background: orange;
}

＆＃13;

<div class=switcher>
  <a href=#>first</a>
  <a href=#>second</a>
</div>

＆＃13;

Answer 1

来自规格：

9.4.2 Inline formatting contexts - 在内联格式化上下文中，框从水平排列，一个接一个地从一个包含块的顶部开始。这些框之间遵循水平边距，边框和填充。盒子可以以不同的方式垂直对齐：它们的底部或顶部可以对齐，或者它们内部的文本基线可以对齐。

虽然padding可以应用于内联元素的所有边，但只有左右填充会对周围内容产生影响。

默认情况下，<a>标记是内联元素。您可以将其设置为内联块，以便尊重水平和垂直padding。因为内联块元素被放置为内联元素（与相邻内容在同一行上），但它表现为块元素。

＆＃13;

.switcher {
  border: 1px dashed green;
}

.switcher a {
  padding: 30px;
  background: orange;
  display: inline-block; /*new*/
}

＆＃13;

<div class=switcher>
  <a href=#>first</a>
  <a href=#>second</a>
</div>

＆＃13;

Answer 2

您可以将recursivelyTraverseLocations(locations) { for (let location of locations) { if (location.parent_location_id > 0) { location.level = _depth_ } else { location.level = 1 } if (location.SUBLOCATIONS) { this.recursivelyTraverseLocations(location.SUBLOCATIONS); } } }或a放入overflow: hidden类

来包含overflow: auto元素

Answer 3

您可以让<a>代码显示阻止...因为锚标记默认情况下与<div> p h1 h2不相似 <a>代码和范围代码是内联代码。这些元素保持内联，直到您应用某个属性显示为块。因此，display: inline-block和display: block都可以使用。

为什么容器div的内容小？

3 个答案: