<div id="menu-container" class="header_"> <div class="logo_0"> <img src="../static/images/logo.png" alt="our_logo" class="icon"> <span class="text">智游云南队</span> </div> <script src="../static/JS/menu.js"></script> </div>为什么扩展后，图片后面没有文字

根据你提供的代码，图片后面没有文字的原因可能是样式没有正确应用到相应的元素上。请确保你的 CSS 样式表中包含了正确的类选择器和属性。

在你提供的 HTML 代码中，图片和文字被包裹在一个具有 `.logo_0` 类的 `<div>` 元素中。因此，你应该使用 `.logo_0` 类选择器来控制图片和文字的样式。

请确保你的 CSS 样式表中包含以下代码：

.logo_0 {
  display: flex;
  align-items: center;
}

.logo_0 .icon {
  margin-right: 10px;
}

.logo_0 .text {
  display: none;
}

#menu-container.expanded .logo_0 .text {
  display: inline;
}

这样，当菜单栏容器 `#menu-container` 被添加 `.expanded` 类时，`.logo_0` 内部的 `.text` 元素将显示出来。

另外，请确保你的 JavaScript 文件 `menu.js` 被正确引入，并且包含了相应的代码来处理菜单栏的扩展和收缩逻辑。

希望这个解答对你有所帮助！如有其他问题，请随时提问。

相关问题

<div id="menu-container" class="header_"> <div class="logo_0"> <img src="../static/images/logo.png" alt="our_logo" class="icon"> <span class="text">智游云南队</span> </div> <script src="../static/JS/menu.js"></script> </div>如何让span文本显示在图片后面

要让 `<span>` 文本显示在图片后面，你可以使用 CSS 中的 `display: flex` 来设置父容器的布局，并使用 `order` 属性来控制子元素的顺序。具体的代码如下：

<div id="menu-container" class="header_">
    <div class="logo_0">
        <img src="../static/images/logo.png" alt="our_logo" class="icon">
        <span class="text">智游云南队</span>
    </div>
    <script src="../static/JS/menu.js"></script>
</div>

.logo_0 {
    display: flex;
    align-items: center;
}

.logo_0 .text {
    order: 1;
    margin-left: 10px; /* 可根据需要调整间距 */
}

在上述代码中，我们给父容器 `.logo_0` 设置了 `display: flex`，这样子元素会按照水平方向排列。然后，通过给 `<span>` 元素设置 `order: 1`，我们将其顺序调整到图片后面。

通过调整 `margin-left` 的值，你可以控制 `<span>` 文本与图片之间的间距大小。

希望这个解答对你有所帮助。如果还有其他问题，请随时提问。