为何设置display:inline后.nav类<div>元素会消失？

嘿，我来帮你捋捋这个问题哈！

为啥设置div div { display: inline; }后，.nav元素就不见了？ #

你的.nav是嵌套在.container这个div里的，所以div div这个选择器刚好能匹配到它。虽然你给.nav加了背景色、宽度这些样式，但你没在.nav的样式里指定display属性，所以div div里的display: inline就会生效在.nav上。

这里的核心问题出在行内元素的特性上：

• 行内元素（inline）不认width属性——你给.nav设的200px宽度直接被浏览器忽略了
• 行内元素的背景色只会紧紧包裹它的内容（比如里面的<h2>文字），不会像块级元素那样撑出一个红色块，看起来就像元素“消失”了（其实是背景只在文字区域显示）
• 还有个小坑：行内元素本来就不该包含<h2>、<ul>这种块级元素，浏览器会偷偷重构DOM，导致布局乱掉，进一步让元素看起来异常

怎么搞定这个问题？ #

给你几个方案，看你需求选：

方案1：给.nav明确设置块级/行内块显示 #

既然你需要.nav有固定宽度，直接在.nav的样式里加个display属性，覆盖掉div div的设置就行：

.nav {
  color: white;
  background-color: red;
  position: relative;
  width: 200px;
  display: block; /* 如果想让它和其他元素在一行，就用 inline-block */
}

方案2：修改div div的选择器，别误伤.nav #

要是你不想让div div的样式影响.nav，可以缩小选择器的范围，比如：

/* 只给.container下除了.nav之外的div设置inline */
.container div:not(.nav) {
  display: inline;
}

或者干脆精准指定你要应用inline的目标元素，别用div div这么宽泛的选择器，免得以后再踩类似的坑。

方案3：提高.nav样式的优先级 #

其实方案1已经够了，但也可以用更具体的选择器来强化.nav的样式，确保display属性生效：

div.container div.nav {
  color: white;
  background-color: red;
  position: relative;
  width: 200px;
  display: block;
}

小提醒 #

尽量少用div div这种太宽泛的选择器，很容易不小心影响到其他嵌套的div。给元素加类名，用类选择器来定位，样式会更可控哦！

内容的提问来源于stack exchange，提问作者Salman Khan Majlish