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

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框架文档，但信息不太多。

最好的问候，

Gordon

- Gordon

Answer 1

我尝试了你的例子，它可以正常工作。我没有发现任何问题... 你用的是哪个浏览器？如果你碰巧使用IE，那可能就是问题所在。虽然它应该是跨浏览器的... 我不使用IE，所以无法检查，抱歉。尝试使用其他浏览器并查看是否已解决该问题。还要确保包括ui-core和ui-theme文件。不要包括任何其他CSS文件，并查看是否已解决该问题。我建议你使用火狐浏览器中的firebug来查看样式如何应用。

查看此页面中CSS的应用方式。这可能会对你有所帮助。

- lepe

Answer 2

你能提供一个它对你不起作用的例子吗？

也许你在加载jQuery-UI-css之后加载了自己的css并覆盖了一些东西。

- Tim

Answer 3

如果您的内容框和标题框不对齐，那很可能是由于CSS中不同的填充所致，请尝试将内容框的填充设置为与标题框的填充相同。当我遇到这个问题时，这个方法解决了这个问题。

- Joe