Html 相邻显示2个下拉列表

我有两个下拉列表，但当第一个被点击时，它会将第二个下拉列表一起放下来，而不是放在顶部

我不能将

position:absolute

与它们一起使用，因为当下拉菜单处于活动状态时，底部会有需要向下推的内容

这是我的密码

HTML

jQuery

$('#list_one a').click(function(){
 $('#list_one ol').toggle();
});

$('#list_two a').click(function(){
 $('#list_two ol').toggle();
});

---

jsiddle:

在容器中左右浮动两个列表，然后将容器的显示设置为inline block

因此，列表的CSS将是：

#lists {
 border: 2px solid blue;
 position: relative;
 width: 300px;
 display:inline-block
}

#list_one {
 width: 100px;
 border: 2px solid red;
 float:left;
}

#list_two {
 width: 100px;
 border: 2px solid green;
 position: relative;
 float:right;
}

---

请参见

，您可以使列表位置浮动，而不是将其设置为相对位置。不过，要想实现这一点，您需要在您的列表中设置

溢出：auto

。然后可以将一个列表向左浮动，将两个列表向右浮动。它看起来像这样：

#list_one {   
  ...   
  float: left; 
}

#list_two {
  ...
  float: right; 
}
#lists {
  overflow: auto;
}

这是您编辑的小提琴：

#lists {
 border: 2px solid blue;
 position: relative;
 width: 300px;
 display:inline-block
}

#list_one {
 width: 100px;
 border: 2px solid red;
 float:left;
}

#list_two {
 width: 100px;
 border: 2px solid green;
 position: relative;
 float:right;
}

#list_one {   
  ...   
  float: left; 
}

#list_two {
  ...
  float: right; 
}
#lists {
  overflow: auto;
}