html - 响应式设计可在同级宽度增加时缩小 div

Question

我正在尝试修复一个网站的错误，该网站的标题包含两个元素，一个向左浮动的 div 和一个向右浮动的 ul。

一般情况下，两者是挨着的，但偶尔 ul 的内容很大，当两者连接时，div 保持在线，但 ul下降到下一行。我想通过牺牲 div 的宽度并将文本分两行来防止这种情况。

到目前为止，我能做的最好的事情是在 px 中显式设置左侧 div 的宽度，但这使得所有内容都变成了两行，而它应该只在需要的时候出现。我在显示和最小/最大宽度方面尝试过的所有其他事情都没有太大影响。

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

<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 也相当复杂，所以我不会在这里包含它，但整个内容可以在 this fiddle 中找到。 .

基本上，当 ul 拉伸(stretch)时，div 应该收缩并且文本换行到下一行。

谢谢

Answer 1

我会这样做 - 将容器设置为 table 并将内部的两个元素设置为 table-cell，这样它们将始终彼此相邻。要将列表项保持在一行中，请在 ul 上设置 white-space:nowrap;，并在 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>