响应式设计,当兄弟的宽度增加时缩小div

Question

我试图修复一个网站的错误,其中标题包含两个元素,一个div浮动左和一个ul浮动右.

通常情况下,两者坐在一起,但偶尔的内容ul很大,两个连接div保持在线上,但ul下降到下一行.我想通过牺牲宽度div和两行文字来防止这种情况.

到目前为止我能做的最好的事情是div在px中明确地设置左边的宽度,但是当它应该只在它需要时它会使所有两行.我尝试过的所有其他事情都显示出最小/最大宽度并没有太大的影响.

我不会在这里发布完整的标记,但它会像这样

<div id="minibasketAndLogin">
    <div id="login"><!--omitted--></div>
    <ul class="basketLoginList">
        <li><!--there are 7 li's in this list--></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</ul>

css也相当复杂,所以我不会在这里包含它,但整个事情都可以在这个小提琴中找到.

基本上,作为ul延伸,div应缩小并将其文本换行到下一行.

谢谢

Answer 1

我会这样做 - 将容器设置为table并将两个元素设置为内部table-cell，这样它们将始终彼此相邻。为了将列表项保持在一行上，请white-space:nowrap;在ul、 和display:inline-block;上进行设置li。

jsfiddle

#minibasketAndLogin {
    display: table;
    width: 100%;
}
#login, .basketLoginList {
    display: table-cell;
}
.basketLoginList {
    white-space: nowrap;
}
.basketLoginList li {
    display: inline-block;
    border: 1px solid;
}

<div id="minibasketAndLogin">
    <div id="login">Login as John Doe</div>
    <ul class="basketLoginList">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7 bla bla bla bla bla bla bla bla bla bla</li>
    </ul>
</ul>