Question

我目前正在开发的项目使用jQuery UI框架来处理它的一些小部件。为了向用户提供全局外观，我想将框架也用于其css内容。

我目前正在实施类似主页的仪表板，用户可以在其中查看其数据的整体状态。此仪表板是一些div的构建，应该与网格布局对齐。

我尝试按照以下方式设置div的样式

<div class="ui-widget">
  <div class="ui-widget-header">Box Header</div>
  <div class="ui-widget-content">
    Content of the Box
  </div>
</div>

稍后我想实现一些可拖动和可排序的功能。

我现在面临的问题是盒子没有正确对齐。

有没有人提示使用jQuery.UI进行那种css工作？我正在研究jqueryui.com上的CSS框架文档，但没有那么多信息。

最好的问候，

戈登

Answer 1

我尝试了你的例子，但它确实有效。我没有看到任何错误...您使用的是哪种浏览器？如果您正在使用IE，那可能是问题所在。即使它被认为是跨浏览器...我不使用IE所以我无法检查，抱歉。尝试使用任何其他浏览器，看看是否已修复。还要确保包含ui-core和ui-theme文件。不要包含任何其他CSS文件，看看是否已修复。我建议你使用firebug（在firefox中）来查看样式的应用方式。

检查this page中CSS的应用方式。您可能会发现它很有用。

Answer 2

你能提供一个不适合你的例子吗？

在加载jQuery-UI-css并覆盖某些内容后，可能会加载自己的css。

Answer 3

如果您的内容框和标题框未对齐，则可能是由于css中的填充不同，请尝试将内容框填充设置为与标题框填充相同。当我遇到它时，这就解决了这个问题。

使用jQuery.UI CSS框架进行DIV样式设计

3 个答案: