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延伸，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>

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

1 个答案: