Javascript 溢出时在CSS中水平滚动-x

在web应用程序中，我有一些面板。在该面板中，我将通过json检索一些标签，因此我不知道确切的数字。当这些标签在其div中溢出-x时，我想添加一个水平滚动条。我使用了

空白：nowrap

和

溢出：auto

，但随后标签会向下移动。它们不再与面板中的标题和图标对齐。我无法将它们对齐

这是HTML代码：

            <nav id="menu" class="nav">                 
                <ul>
                    <li>
                        <a href="#">
                            <span class="icon">
                                <i aria-hidden="true" class="icon-home"></i>
                            </span>
                            <span>Client 1</span>
                            <div class="commesse">
                                <ul>
                                    <li>Matr 23</li>
                                    <li>Matr 78</li>
                                    <li>Matr 1351</li>
                                    <li>Matr 63</li>
                                    <li>Matr 81</li>
                                </ul>
                            </div>
                        </a> 
                    </li>
                    <li>
                        <a href="#">
                            <span class="icon"> 
                                <i aria-hidden="true" class="icon-services"></i>
                            </span>
                            <span>Client 2</span>
                            <div class="commesse">
                                <ul>
                                    <li>Matr 1235</li>
                                    <li>Matr 61</li>
                                    <li>Matr 72</li>
                                    <li>Matr 42</li>
                                    <li>Matr 771</li>
                                    <li>Matr 671,b</li>
                                    <li>Matr 217.a</li>
                                    <li>Matr 2754</li>
                                    <li>Matr 2</li>
                                    <li>Matr 887</li>
                                </ul>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="icon">
                                <i aria-hidden="true" class="icon-portfolio"></i>
                            </span>
                            <span>Client 3</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="icon">
                                <i aria-hidden="true" class="icon-blog"></i>
                            </span>
                            <span>Client 4</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="icon">
                                <i aria-hidden="true" class="icon-team"></i>
                            </span>
                            <span>Client 5</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="icon">
                                <i aria-hidden="true" class="icon-contact"></i>
                            </span>
                            <span>Client 6</span>
                        </a>
                    </li>

                </ul>
            </nav>

---

下面是完整代码：

只需删除空白：nowrap来自

.commesse ul

并将其交给

.nav a

            <nav id="menu" class="nav">                 
                <ul>
                    <li>
                        <a href="#">
                            <span class="icon">
                                <i aria-hidden="true" class="icon-home"></i>
                            </span>
                            <span>Client 1</span>
                            <div class="commesse">
                                <ul>
                                    <li>Matr 23</li>
                                    <li>Matr 78</li>
                                    <li>Matr 1351</li>
                                    <li>Matr 63</li>
                                    <li>Matr 81</li>
                                </ul>
                            </div>
                        </a> 
                    </li>
                    <li>
                        <a href="#">
                            <span class="icon"> 
                                <i aria-hidden="true" class="icon-services"></i>
                            </span>
                            <span>Client 2</span>
                            <div class="commesse">
                                <ul>
                                    <li>Matr 1235</li>
                                    <li>Matr 61</li>
                                    <li>Matr 72</li>
                                    <li>Matr 42</li>
                                    <li>Matr 771</li>
                                    <li>Matr 671,b</li>
                                    <li>Matr 217.a</li>
                                    <li>Matr 2754</li>
                                    <li>Matr 2</li>
                                    <li>Matr 887</li>
                                </ul>
                            </div>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="icon">
                                <i aria-hidden="true" class="icon-portfolio"></i>
                            </span>
                            <span>Client 3</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="icon">
                                <i aria-hidden="true" class="icon-blog"></i>
                            </span>
                            <span>Client 4</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="icon">
                                <i aria-hidden="true" class="icon-team"></i>
                            </span>
                            <span>Client 5</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <span class="icon">
                                <i aria-hidden="true" class="icon-contact"></i>
                            </span>
                            <span>Client 6</span>
                        </a>
                    </li>

                </ul>
            </nav>

---

哇，这比我想象的要容易。非常感谢你！！