我正在尝试修复一个网站的错误,其中标题包含两个元素,一个div浮动左边,一个ul浮动右边.
通常,两者坐在一起,但偶尔ul的内容很大,因为两者连接div保持在线上但ul下降到下一行.我想通过牺牲div上的宽度并将文本放在两行来防止这种情况.
到目前为止我能做的最好的事情是在px中明确地设置左边div的宽度,但是当它应该只在需要时它会使所有两行都行.我尝试过的所有其他事情都显示出最小/最大宽度并没有太大的影响.
我不会在这里发布完整的标记,但它会像这样
最佳答案
我会这样做 – 将容器设置为表格,将两个元素设置为table-cell,这样它们将始终保持彼此相邻.要将列表项保持在一行上,请设置white-space：nowrap;在ul上,显示：inline-block;在李.
#minibasketAndLogin {
display: table;
width: 100%;
}
#login,.basketLoginList {
display: table-cell;
}
.basketLoginList {
white-space: nowrap;
}
.basketLoginList li {
display: inline-block;
border: 1px solid;
}
