Я пытаюсь отобразить 2 блока в одной строке с помощью css, сохраняя горизонтальную прокрутку на последнем блоке. Пока мне не удалось выполнить эту работу. У меня есть 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, но при этом отключается полоса прокрутки. Мне нужна полоса прокрутки для работы.

Спасибо.

2
fortesl 21 Дек 2014 в 05:34

2 ответа

Лучший ответ

Рассмотрим 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>
1
superUntitled 21 Дек 2014 в 02:48

Самый простой способ - обернуть их в div-оболочку и сделать его display:table-row, в то время как два div, которые вы хотите в одной строке, будут иметь display:table-cell

http://jsfiddle.net/1z5xtd8x/

1
Alex Pakka 21 Дек 2014 в 02:55