如何阻止jQuery UI对话框被压扁？

Question

我有一个相当简单的div元素，我希望通过jQuery UI变成一个弹出窗口。 HTML基本上是

<div id="login_form">
     <table> ... </table>
</div>

没有任何jQuery参与，它会很自然地呈现（绿色背景来自div并适合其内容）：

当我使用此代码进入弹出窗口时：

 $(document).ready(function()
{
    $("#login_form") .dialog (
    {
        autoOpen: false
    });

    $("#login_or_sign_up") .click (function()
    {
        $("#login_form") .dialog ("open");
    });
});

它呈现这样。

呸。

我很确定原因很简单，我没有包含jQuery UI CSS文件。 我不想包含jQuery UI CSS文件。

通过检查弹出窗口，我注意到jQuery创建了另一个div，它围绕着我提供的div，并且它的样式宽度为300px。我希望这是问题所在 - jQuery UI选择的尺寸太小而且内部元素没有减少它们自适应。

我可以制作jQuery对话框 - 如果我的div没有缩小它吗？

如果没有，我可以通过单独向内部元素添加width:100%样式来解决这个问题。在这种情况下，是否有一般的解决方法，不需要我改变任何内部元素？

Answer 1

.dialog({ width: 'auto' })有效。