使用 jQuery.UI CSS 框架进行 DIV 样式设置答案

【问题标题】：Using jQuery.UI CSS Framework for DIV Styling使用 jQuery.UI CSS 框架进行 DIV 样式设置
【发布时间】：2010-11-19 07:37:25
【问题描述】：

我目前正在处理的一个项目将 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 框架文档，但没有那么多信息。

最好的问候，

戈登

【问题讨论】：

标签： jquery-ui html css-frameworks

【解决方案1】：

我尝试了您的示例并且它有效。我没有发现任何问题...您使用的是哪个浏览器？如果您有任何机会使用 IE，这可能是问题所在。即使它被认为是跨浏览器......我不使用IE，所以我无法检查，对不起。尝试使用任何其他浏览器，看看是否已修复。还要确保包含 ui-core 和 ui-theme 文件。不要包含任何其他 CSS 文件，看看是否已修复。我建议您使用 firebug（在 firefox 中）查看样式是如何应用的。

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

【讨论】：

【解决方案2】：

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

也许您在加载 jQuery-UI-css 并覆盖某些内容后加载自己的 css。

【讨论】：

【解决方案3】：

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

【讨论】：