当overflow-x时CSS中的水平滚动

Question

在Web应用程序中，我有一些面板。在那个面板中，我有一些标签，我将通过json检索，所以我不知道确切的数字。当这些标签在div中溢出-x时，我想添加一个水平滚动。我已使用white-space: nowrap和overflow: 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>

这是关于上述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

只需从socket.on('base64 file', function (msg) { console.log('received base64 file from' + msg.username); socket.username = msg.username; // socket.broadcast.emit('base64 image', //exclude sender io.sockets.emit('base64 file', //include sender { username: socket.username, file: msg.file, fileName: msg.fileName } ); }); 移除white-space: nowrap;并将其转至.commesse ul

即可

<强> Updated Plunker