html - 如何在同一行显示 2 个 div，同时在最后一个 div 中保持水平滚动？

Question

我尝试使用 css 在同一行上显示 2 个 div，同时在最后一个 div 上保持水平滚动。到目前为止我还没能完成这项工作。我有一个jsfiddle，http://jsfiddle.net/fortesl/h54t1t63/3/ ，代码如下:

HTML:

<div class="title-menu">
<div class="title">
    A long unbreakable name
</div>
</div>
<div class="toolbar-scroll">
<ul>
    <l1>item1</l1>
    <l1>item2</l1>
    <l1>item3</l1>
    <l1>item4</l1>
    <l1>item5</l1>
    <l1>item6</l1>
    <l1>item7</l1>
    <l1>item8</l1>
    <l1>item9</l1>
    <l1>item10</l1>
    <l1>item11</l1>
    <l1>item12</l1>
    <l1>item13</l1>
    <l1>item14</l1>
    <l1>item15</l1>
</ul>
</div>

CSS:

ul {;
list-style-type: none;
}
li {
display: inline;
}

.title-menu {
display: inline-block;
z-index: 1004;
max-width: 540px;
max-heigth: 40px;
}
.title {
display: inline-block;
font-size: 21pt;
text-shadow: 0 0 1px rgba(40, 40, 41, 0.3);
letter-spacing: 2px;
height: 47px;
overflow: hidden;
white-space: nowrap;
}
.toolbar-scroll {
overflow: scroll;
white-space: nowrap;
overflow-x: scroll;
overflow-y: hidden;
}

我可以通过在最后一个 div 上设置“display: inline-block”来在同一行显示 div，但这样做会禁用滚动条。我需要滚动条才能工作。

谢谢。

Answer 1

考虑一下display: table-cell;，它确实非常方便。

http://jsfiddle.net/h54t1t63/4/

body {
    margin-top: 100px;
}
ul {;
    list-style-type: none;
}
li {
    display: inline;
}

.container { display:table; }

.title-menu {
    display:table-cell;
    z-index: 1004;
    max-width: 540px;
    max-heigth: 40px;
}
.title {
    display:table-cell;
    font-size: 21pt;
    text-shadow: 0 0 1px rgba(40, 40, 41, 0.3);
    letter-spacing: 2px;
    height: 47px;
    overflow: hidden;
    white-space: nowrap;
}
.toolbar-scroll {
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 3em;
    text-align: bottom;
    width: 100px;
}

<div class='container'>
<div class="title-menu">
    <div class="title">
        A long unbreakable name
    </div>
</div>
<div class="toolbar-scroll">
    <ul>
        <l1>item1</l1>
        <l1>item2</l1>
        <l1>item3</l1>
        <l1>item4</l1>
        <l1>item5</l1>
        <l1>item6</l1>
        <l1>item7</l1>
        <l1>item8</l1>
        <l1>item9</l1>
        <l1>item10</l1>
        <l1>item11</l1>
        <l1>item12</l1>
        <l1>item13</l1>
        <l1>item14</l1>
        <l1>item15</l1>
    </ul>
</div></div>