侧边栏Romance项下拉箭头对齐问题及修复请求

问题原因 #

你的代码里，Romance分类的容器用了自定义类link-icon，但其他所有带下拉箭头的分类用的都是icon-link，而CSS中只有.icon-link设置了display: flex; align-items: center; justify-content: space-between;这些控制元素对齐的样式，link-icon没有对应的样式，导致箭头无法和其他分类保持一致的布局。此外，.icon-link里的flex-wrap: wrap也可能在文本过长时导致箭头换行，影响对齐。

修复方案 #

步骤1：统一容器类名 #

找到HTML中Romance分类的容器，把class="link-icon"改成class="icon-link"，和其他分类保持一致：

<!-- 修改前 -->
<div class="link-icon">
  <a href="#">
    <i class='bx bx-heart'></i>
    <span class="link_name">Romance</span>
  </a>
  <i class='bx bxs-chevron-down arrow' ></i>
</div>

<!-- 修改后 -->
<div class="icon-link">
  <a href="#">
    <i class='bx bx-heart'></i>
    <span class="link_name">Romance</span>
  </a>
  <i class='bx bxs-chevron-down arrow' ></i>
</div>

步骤2：优化CSS布局（可选） #

如果箭头仍然有换行问题，可以修改.icon-link的flex-wrap属性，去掉换行，确保图标、文本和箭头在同一行：

/* 修改前 */
.sidebar .nav-links li .icon-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* 修改后 */
.sidebar .nav-links li .icon-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap; /* 禁止换行，确保所有元素在一行 */
}

额外修复：HTML结构错误 #

你的HTML里有一个多余的</div>标签，在</ul>之前，需要删除，避免结构混乱：

<!-- 找到这段代码，删除多余的</div> -->
      </li>
    </div> <!-- 这个是多余的，删掉 -->
</ul>

修改后的完整代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en" dir="ltr">
  
  <head>
    <meta charset="UTF-8">
    <title>
      Home page
    </title>
    <script defer src="/JS files/sidebar.js"></script>
    <link rel="stylesheet" href="/CSS files/home_style.css">
    <!-- Boxicons CDN Link -->
    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  
 <body>
  <div class="sidebar close">
    <div class="logo-details">
      <i class='bx bx-tv'></i>
      <span class="logo_name">Anime</span>
    </div>
    <ul class="nav-links">
      <li>
        <a href="/HTML files/home.html">
          <i class='bx bx-home'></i>
          <span class="link_name">Home</span>
        </a>
        <ul class="sub-menu blank">
          <li><a class="link_name" href="/HTML files/home.html">Home</a></li>
        </ul>
      </li>
      <li>
        <div class="icon-link">
            <a href="#">
            <i class='bx bx-target-lock'></i>
            <span class="link_name">Action</span>
          </a>
          <i class='bx bxs-chevron-down arrow' ></i>
        </div>
        <ul class="sub-menu">
          <li><a class="link_name" href="#">Action</a></li>
          <li><a href="#">Chainsaw Man</a></li>
          <li><a href="#">Jigoraku</a></li>
          <li><a href="#">One Punch Man</a></li>
        </ul>
      </li>
      <li>
        <div class="icon-link">
          <a href="#">
          <i class='bx bx-heart'></i>
          <span class="link_name">Romance</span>
        </a>
        <i class='bx bxs-chevron-down arrow' ></i>
        </div>
        <ul class="sub-menu">
          <li><a class="link_name" href="#">Romance</a></li>
          <li><a href="#">Horimiya</a></li>
          <li><a href="#">Tokikaku Kawaii</a></li>
          <li><a href="#">Kaguya-sama: Love <br> is war</a></li>
          <li><a href="#">Your Lie in April</a></li>
          <li><a href="#">Toradora</a></li>
          <li><a href="#"></a></li>
        </ul>
      </li>
      <li>
        <div class="icon-link">
          <a href="#">
            <i class='bx bxs-magic-wand'></i>
            <span class="link_name">Isekai</span>
          </a>
          <i class='bx bxs-chevron-down arrow' ></i>
        </div>
        <ul class="sub-menu">
          <li><a class="link_name" href="#">Isekai</a></li>
          <li><a href="#">Overlord</a></li>
          <li><a href="#">No Game No Life</a></li>
          <li><a href="#">Kumo Desu Ga, <br> Nani Ka?</a></li>
        </ul>
      </li>
      <li>
        <div class="icon-link"> 
          <a href="#">
            <i class='bx bx-joystick' ></i>
            <span class="link_name">Sci-Fi</span>
          </a>
          <i class='bx bxs-chevron-down arrow' ></i>
        </div> 
        <ul class="sub-menu">
          <li><a class="link_name" href="#">Analytics</a></li>
          <li><a href="#">Tengokyu Daimakyou</a></li>
          <li><a href="#">Neon Genesis <br> Evangelion</a></li>
          <li><a href="#">Assassination Classroom</a></li>
        </ul>
      </li>
      <li>
        <div class="icon-link">  
        <a href="#">
          <i class='bx bx-laugh'></i>
          <span class="link_name">Comedy</span>
        </a>
        <i class='bx bxs-chevron-down arrow' ></i>
        </div>
        <ul class="sub-menu">
          <li><a class="link_name" href="#">Comedy</a></li>
          <li><a href="#">Ya Boy Kongming</a></li>
          <li><a href="#">Zom 100: Bucket <br> List of the Dead</a></li>
          <li><a href="#">Bocchi the Rock!</a></li>
        </ul>
      </li>
      <li>
        <div class="icon-link">
          <a href="#">
            <i class='bx bx-landscape'></i>
            <span class="link_name">Slice of Life</span>
          </a>
          <i class='bx bxs-chevron-down arrow' ></i>
        </div>
        <ul class="sub-menu">
          <li><a class="link_name" href="#">Slice of Life</a></li>
          <li><a href="#">Oshi no Ko</a></li>
          <li><a href="#">Miss Kobayashi's <br> Dragon Maid</a></li>
          <li><a href="#">Gokushufudou</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <section class="home-section">
    <div class="home-content">
      <i class='bx bx-menu' ></i>
      <span class="text">What is Anime?</span>
    </div>
  </section>
  
  <div class="one"></div>
</body>
</html>

CSS代码（修改部分） #

.sidebar .nav-links li .icon-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
}

JavaScript代码（无需修改） #

for (var i = 0; i < arrow.length; i++) {
  arrow[i].addEventListener("click", (e)=>{
 let arrowParent = e.target.parentElement.parentElement;//selecting main parent of arrow
 arrowParent.classList.toggle("showMenu");
  });
}
let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".bx-menu");
console.log(sidebarBtn);
sidebarBtn.addEventListener("click", ()=>{
  sidebar.classList.toggle("close");
});

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