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

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

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

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

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

css也相当复杂,所以我不会在这里包含它,但整个事情可以在this fiddle找到.

基本上,当ul伸展时,div应缩小,并将文本换行到下一行.

谢谢

最佳答案

我会这样做 – 将容器设置为表格,将两个元素设置为table-cell,这样它们将始终保持彼此相邻.要将列表项保持在一行上,请设置white-space：Nowrap;在ul上,显示：inline-block;在李.

jsfiddle

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