Question

我已在我的网页上实施了Chosen Plug-in，效果很好。最近我决定切换到960网格系统，让我的页面翻新。当我这样做时，选择插件中的样式似乎弄乱了网格系统，导致网格上的轮廓从屏幕左侧移开。我有一种感觉，这必须对网格如何相对浮动以及插件中的样式只是抛弃它做些什么。但是，我似乎无法找到造成这种情况的风格究竟是什么，或者我如何改变它。有没有人有这个插件的经验谁可以给我建议？我宁愿不必剥离这个插件，因为从功能上来说，它很棒！

编辑：虽然，当我点击下拉列表时，样式看起来似乎正确。仅在下拉项目未显示时才会显示。

Answer 1

想出这个。

我不得不将下拉菜单的CSS属性更改为display: none，而不是将绝对定位更改为-99999px。

这是我的代码：

.chzn-container .chzn-drop {
  width: 100% !important;
  display: none;
  background: #f6fbfd;
  border: 1px solid #9fbeca;
  border-top: 0;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 900;
  width: 100% !important; /*to line up the right side visually*/
  -moz-box-sizing   : border-box;
  -ms-box-sizing    : border-box;
  -webkit-box-sizing: border-box; 
  -khtml-box-sizing : border-box;
   box-sizing: border-box;

然后我只需将值设置为内联：

.chzn-container.chzn-with-drop .chzn-drop {
  left: 0;
  display: inline;
}

Javascript选择使用网格系统插件

1 个答案: