CSS问题：图标无法与‘Failed to load game’文本并排显示

问题根源在于<p>标签是块级元素，默认会独占一行，导致图标和文本无法在同一行显示。同时外层标签的布局逻辑也需要调整，以下是具体修复方案：

1. 调整HTML结构 #

把包裹图标和文本的<b>标签替换为行内块容器，将原<p>标签改为<span>（行内元素，不会独占一行），保留加粗效果通过CSS实现：

修改后的核心HTML片段：

<div class="game-name-icon">
  <span class="icon-text-group">
    <img src="https://via.placeholder.com/20x20?text=img" id="game-icon-sm" width="20" height="20">
    <span class="logo-options" id="logo-options">Failed to load game</span>
  </span>
</div>

2. 优化CSS样式 #

调整.game-name-icon及内部元素的布局规则，确保图标和文本垂直居中且横向排列：

修改后的核心CSS片段：

.game-name-icon{
  display: flex;
  align-items: center;
  padding-left: 15px; /* 和右侧图标区域保持内边距一致 */
  background-color: #00FF00;
}

.icon-text-group {
  display: flex;
  align-items: center;
  gap: 8px; /* 图标与文本之间的间距 */
}

.logo-options {
  font-weight: bold; /* 替代原<b>标签的加粗效果 */
}

.icons-options{
  padding-right: 15px;
  padding-top: 0;
  margin: 0;
  display: flex;
  align-items: center; /* 和左侧内容垂直居中对齐 */
}

完整修复代码 #

HTML #

<html>
<head>
  <title>funnies</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script src="https://kit.fontawesome.com/204c1cf7c6.js" crossorigin="anonymous"></script>
</head>
<body>
  <iframe id="game-frame" scrolling="no" frameborder="0" width="75%" height="80%" cellspacing="0" src="https://example.com"></iframe>
   <div id="game-options">
   <div class="game-name-icon">
     <span class="icon-text-group">
       <img src="https://via.placeholder.com/20x20?text=img" id="game-icon-sm" width="20" height="20">
       <span class="logo-options" id="logo-options">Failed to load game</span>
     </span>
    </div>
   <div class="icons-options">
     <a href="#" style="padding-right: 10px;">
       <i class="fa-solid fa-heart" style="color: #ffffff;"></i>
     </a>
     <a href="#">
       <i class="fa-solid fa-expand" style="color: #ffffff;" onclick="fullscreen()"></i>
     </a>
   </div>
   </div>
  <script src="fullscreen.js"></script>
  <script src="setdata.js"></script>
  <script>
  const myClass = document.querySelector('.fa-heart');

function favorite() {
  if (myClass.style.color === 'rgb(255, 255, 255)' || myClass.style.color === '') {
    myClass.style.color = '#c72e47';
  } else {
    myClass.style.color = '#ffffff';
  }
}

myClass.addEventListener('click', favorite);
  </script>
</body>
</html>

CSS #

body, html {
  height: 100%;
  width: 100%;
  font-family: Arial;
}
p{
  margin: 0;
}
#game-frame{
  margin: 0 auto;
  display: block;
  border-top: 6px solid black;
  border-left: 6px solid black;
  border-right: 6px solid black;
  border-radius: 13px 13px 0px 0px;
}
#game-options{
  max-width: 75%;
  margin: 0 auto;
  border: 6px solid black;
  display: flex;
  justify-content: space-between;
  align-items: center; /* 左右区域整体垂直居中 */
  border-radius: 0px 0px 13px 13px;
  color: #ffffff;
  background-color: #000000;
}
.icons-options{
  padding-right: 15px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px; /* 替代原内联样式的padding */
}
.game-name-icon{
  display: flex;
  align-items: center;
  padding-left: 15px;
  background-color: #00FF00;
}
.icon-text-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.logo-options {
  font-weight: bold;
}

修改后图标与文本会正常并排显示，且整体布局保持垂直居中对齐。

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