使用jQuery的toChecklist插件的UI /部署到服务器的问题-步骤查看

我正在使用jQuery的toChecklist插件。在我的开发机器上一切正常。但是，当我在登台服务器上安装使用该插件的应用程序时，toChecklist插件看起来不正确。

基本上不是让所有的复选框排成一列，一个在另一个上面，复选框的形式更像是一个步骤。每个复选框都比上面的复选框缩进一点。

当我在本地机器上安装应用程序时，它看起来也很好。

我正在开发一个ASP。. NET MVC环境。

我认为这与CSS有关。所以，我确实摆弄了一下CSS。如果我从插件自带的默认css中删除字体大小，以及我的站点范围css中的body标签，那么复选框就会正确排列。然而，这显然不是一个可行的解决方案，因为这会影响我的整个网站。

我不是一个设计师，更像是一个中间层的家伙，所以任何建议将是非常感激的。

以下是插件自带的默认css:

div.checklist, div.checklistHighlighted { overflow-y: auto; overflow-x: hidden; /* If 
you don't want scrollbars, leave this one blank. */ }
div.checklist { border: 1px solid gray; border-left: 3px solid #ccc; color: #555; font-family: arial; font-size: 10px;  line-height: 1.6em; clear:both;}
div.checklistHighlighted { border: 1px solid gray; border-left: 3px solid ##93BFE5; }
ul.checklist { list-style-type: none; margin: 0; padding: 0; }
div.checklist li { padding: 2px; }
div.checklist li.even { background-color: white; }
div.checklist li.odd { background-color: #f7f7f7; }
div.checklist li.even:hover, div.checklist li.odd:hover, div.checklist li.focused, div.checklist li:hover label { background-color: #93BFE5; }
div.checklist li.checked { background: #93BFE5; font-style: italic; }
div.checklist li.checked:hover, div.checklist li.checked:hover label { background: #93BFE5; font-style: italic; }
div.checklist label.disabled { color: #ddd; }
/*div.checklist li { position: relative; }*/
div.checklist li input { display: block; float: left; }
div.checklist label { display: block; margin: 0; padding: 0; }
div.checklist label.leaveRoomForCheckbox { display: block; padding-left: 25px; /* If hiding checkboxes, set padding-left to 3px */ } 
ul.showSelectedItems { color: #770; font-size: .8em; list-style-position: outside; margin-left: 0; padding-left: 1.4em; }
/**** Search box ****/
div.findInList { margin-bottom: 5px; }
div.findInList input { background-color: #ffffef; border: solid 1px #eee; color: black; font-family: arial; font-size: .8em; padding: 2px; }
div.findInList input.blurred { background-color: white; color: gray; }
div.checklist li.optgroup { font-size: 1.1em; font-weight: bold; font-style: italic; background-color: #ccc; border-top: 1px solid #777; border-bottom: 1px solid #777; padding-left: 7px; }
div.checklist li.optgroup:hover { background-color: #ccc; }

Jeremy,

我还在做这个问题(上周晚些时候岔开了)

根据您的请求，他是链接:http://jsfiddle.net/kMkqk/

基本上，除了CSS和插件代码之外，我几乎把所有东西都从我的页面中删除了。希望通过这样做可以更容易地识别问题。

这是奇数部分。当我在本地开发机器上运行link时，所有复选框一个一个地排列在一起，这就是我想要的。但是，当我转到我的分级服务器和QA服务器上的链接时，复选框具有步进效果(每个复选框都与上面的复选框缩进)，这是我不想要的。

让我知道你看到了什么，你的想法是什么。

任何帮助都将非常感激。谢谢你的帮助。

R

.yourCheckboxClass{
  clear:both;
}