如何实现父元素宽度与子元素宽度相等？（附导航栏代码示例）

当然可以实现父元素宽度完全贴合子元素的宽度！默认情况下，像<navbar>这类块级元素会默认占满父容器的100%宽度，所以我们需要通过一些CSS调整来让它收缩到子元素的宽度。结合你的导航栏代码，我给你整理了几种实用方案：

方法1：使用inline-block将父元素转为行内块元素 #

行内块元素的宽度会自动由内部内容决定，非常适合你的场景：

HTML（补充下拉项内容方便演示） #

<navbar>
  <ul>
    <li>word X</li>
    <li>word Y</li>
    <li> A ▼
      <ul>
        <li>下拉项1</li>
        <li>下拉项2</li>
        <li>下拉项3</li>
      </ul>
    </li>
    <li> B ▼
      <ul>
        <li>下拉项A</li>
        <li>下拉项B</li>
      </ul>
    </li>
  </ul>
</navbar>

CSS #

/* 核心：让navbar转为行内块，宽度贴合子元素 */
navbar {
  display: inline-block;
  /* 可选：加边框直观看到宽度范围 */
  border: 1px solid #ddd;
  padding: 0.5rem;
}

/* 重置导航栏ul的默认样式，横向排列 */
navbar > ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.5rem; /* 导航项之间的间距 */
}

/* 下拉菜单样式（不影响父元素宽度，因为绝对定位脱离文档流） */
navbar > ul li {
  position: relative; /* 让下拉菜单相对父li定位 */
}

navbar > ul li ul {
  position: absolute;
  top: 100%;
  left: 0;
  list-style: none;
  padding: 0.8rem 0;
  margin: 0;
  min-width: 120px;
  border: 1px solid #eee;
  display: none; /* 默认隐藏下拉菜单 */
}

navbar > ul li:hover ul {
  display: block; /* hover时显示下拉 */
}

navbar > ul li ul li {
  padding: 0.4rem 1rem;
}

小提示：inline-block可能会带来元素间的空白间距，解决方法是给父元素navbar设置font-size: 0，然后给子元素ul恢复font-size: 16px即可。

方法2：使用width: fit-content（推荐） #

这是CSS新增的属性，语义化更强，直接让元素宽度适配内容：

CSS核心代码 #

navbar {
  width: fit-content;
  /* 可选：让导航栏居中 */
  margin: 0 auto;
  border: 1px solid #ddd;
  padding: 0.5rem;
}

/* 后面的ul和下拉菜单样式和方法1一致 */

fit-content兼容性很好，现在主流浏览器（Chrome、Firefox、Edge等）都支持，唯一的缺点是IE不支持，但现在IE已经基本被淘汰，所以这个方案是首选。

方法3：使用浮动（不推荐） #

早期常用的方案，但浮动会引发布局塌陷问题，需要额外处理清除浮动，所以现在不建议使用，仅作了解：

navbar {
  float: left;
  border: 1px solid #ddd;
  padding: 0.5rem;
}

/* 记得在父元素的父容器添加清除浮动的样式，比如： */
body::after {
  content: "";
  display: block;
  clear: both;
}

关键说明 #

对于你的下拉菜单，因为我们用了position: absolute，它会脱离文档流，所以不会影响父元素的宽度——父元素的宽度只会由横向排列的导航项（非绝对定位的子元素）决定，这正是我们想要的效果。

内容的提问来源于stack exchange，提问作者Proz1g