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

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

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

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

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

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

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

谢谢

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