javascript - overflow-x 时在 CSS 中水平滚动

Question

在网络应用程序中，我有一些面板。在该面板中，我有一些要通过 json 检索的标签，因此我不知道确切的数字。当这些标签在它们的 div 中溢出时，我想添加一个水平滚动条。我已经使用 white-space: nowrap 和 overflow: auto 完成了它，但随后标 checkout 现向下移动。它们不再与面板中的标题和图标对齐。而且我无法对齐它们。

这是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>

这是关于提到的 html 的 CSS:

.nav ul {
max-width: 1240px;
margin: 0;
padding: 0;
list-style: none;
font-size: 1.5em;
font-weight: 300;
max-height: 388px;
} 

.nav li {
display: block;
float: none;
width: 100%;
height: 164px;
border: 2px solid rgba(255,255,255,0.1);
margin-bottom: 30px;
overflow: auto;
}

.nav li i {
display: inline-block;
padding: 27% 28%;
border: 4px solid transparent;
border-radius: 50%;
font-size: 1.5em;
background: rgba(255,255,255,0.1); 
}


.nav li span {
display: block;
text-align: left;
margin-right: 11px;
}

.nav a {
display: block;
color: rgba(249, 249, 249, .9);
text-decoration: none;
padding: 0.8em; 
-webkit-transition: color .5s, background .5s, height .5s;
-moz-transition: color .5s, background .5s, height .5s;
-o-transition: color .5s, background .5s, height .5s;
-ms-transition: color .5s, background .5s, height .5s;
transition: color .5s, background .5s, height .5s;
}

.nav li span, 
.nav li span.icon {
display: inline-block;
} 

.nav li .icon + span {
font-size: 1.3em;
}

.icon + span {
position: relative;
top: -0.1em;
}

.icon {
padding-top: .8em;
}

.commesse, .commesse ul {
display: inline;
}  

.commesse ul {
 white-space: nowrap;

}

.commesse ul li {
 display: inline;  
}

这是完整代码:enter link description here

Answer 1

只需从 .commesse ul 中删除 white-space: nowrap; 并将其提供给 .nav a

Updated Plunker