设置display:inline后，hover时CSS rotate属性失效问题求助

CSS 的 transform 属性仅对块级元素、替换元素或设置了 display: inline-block/display: flex 等的行内元素生效。当你把包含图标的 div 设置为 display: inline 时，它变成了纯行内非替换元素，这类元素不支持 transform 变换，所以旋转效果失效。

另外你的代码存在一个规范问题：页面中出现了重复的 id="caret"，ID 在 HTML 里必须唯一，应该改用 class 来选中元素。

下面提供几种可行的修复方式：

方法1：将 display: inline 改为 display: inline-block #

把行内元素改成行内块元素，既保留行内布局的特性，又能支持 transform：

<button class="dropbtn">HTML/CSS <div style="display: inline-block" class="caret"><i class="fa-solid fa-caret-right"></i></div></button>

对应的CSS修改为（把id选择器改成class选择器）：

.dropbtn:hover .caret {
  transform: rotate(90deg);
  /* 可选：添加过渡动画让旋转更平滑 */
  transition: transform 0.2s ease;
}

方法2：直接对 FontAwesome 图标元素应用旋转 #

不需要给图标套额外的div，直接选中 <i> 标签设置变换，更简洁：

<button class="dropbtn">HTML/CSS <i class="fa-solid fa-caret-right caret-icon"></i></button>

CSS：

.dropbtn:hover .caret-icon {
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

方法3：给行内元素添加变换触发条件（不推荐） #

如果一定要保留 display: inline，可以给元素添加 position: relative 来让transform生效，但这种方式不符合布局规范，仅作参考：

.dropbtn:hover #caret {
  display: inline;
  position: relative;
  transform: rotate(90deg);
}

HTML #

<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
</head>
<body>
  <div class="dropdown">
    <button class="dropbtn">HTML/CSS <div style="display: inline-block" class="caret"><i class="fa-solid fa-caret-right"></i></div></button>
    <div class="dropdown-content">
      <a href="#pRow1">ForeverGrind</a>
      <a href="#pRow2">CopeWare Website</a>
    </div>
  </div>
  <div class="dropdown">
    <button class="dropbtn">HTML/CSS <div class="caret"><i class="fa-solid fa-caret-right"></i></div></button>
    <div class="dropdown-content">
      <a href="#pRow1">ForeverGrind</a>
      <a href="#pRow2">CopeWare Website</a>
    </div>
  </div>
</body>
</html>

CSS #

.dropbtn {
  background-color: #242526;
  color: #ffffff;
  padding: 10px;
  font-size: 16px;
  border: 1px outset #242526;
  cursor: pointer;
  margin-top: 3px;
  margin-right: 5px;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #23a6d5;
}

.dropbtn:hover .caret {
  transform: rotate(90deg);
  transition: transform 0.2s ease;
}

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