jQuery对话框宽度调整大小问题

Question

我尝试通过AJAX将一些HTML代码加载到jQueryUI对话框中。代码本身是一个列表，其中最右边的元素应该被绝对定位，以便列表看起来像一个有两列的表，但只在某些行中。问题是jQueryUI插件似乎没有正确调整对话框的宽度，我认为这是由于某些li的绝对定位。我已经阅读了其他类似问题的一些答案，但没有人帮助我解决这个问题。

这是我加载代码：

<style type="text/css"> 

    ul {list-style-type:none;margin:0px;padding:0px;} 
    ul ul {margin:0px;padding:0px;} 
    ul>li.fila {margin-bottom:5px;padding-bottom:5px;} 

    ul li.fila ul li 
    { 
     display:inline; 
     padding-left:20px; 
     position:relative; 
     margin-bottom:10px; 
    } 
    ul li.fila ul li.O 
    { 
     background:url(bullet.gif) 5px 8px no-repeat; 
     list-style-position:inside; 
    } 

    </style> 

    <ul id="raiz" > 
    <li class="fila"> 
     <ul > 
     <li style="position:absolute;left:0px;" class="O"> 
     <label for="col1">Col1:</label> 
     <input type="text" name="col1" id="col1" value="vCol1" class="text ui-widget-content ui-corner-all" /> 
     </li> 
     <li style="left:250px;" class="O" > 
     <label for="col2">Col2:</label> 
     <input type="text" name="col2" id="col2" value="vCol2" class="text ui-widget-content ui-corner-all" /> 
     </li> 
     </ul> 
    </li> 
    <li class="fila"> 
     <ul > 
     <li> 
     <label for="col3">Col3:</label> 
     <input type="text" name="col3" id="col3" value="vCol3" class="text ui-widget-content ui-corner-all" /> 
     </li> 
     </ul> 
    </li> 
    </ul> 

，并在对话框的构造函数：

$("#dialog").dialog({ 
     bgiframe: true, 
     autoOpen: false, 
     height: 'auto', 
     width: 'auto', 
     modal: true, 
     buttons:{ 
      'Cancel': function() { 
       $(this).dialog('close'); 
      } 
     }, 
     open: function(event,ui){    
      $("#dialog").load("dialogCode.html"); 
     } 
    }); 

在此先感谢您的任何建议。

Answer 1

如果您希望以表格格式显示List元素，请使用CSS的FLOAT属性，而不是绝对定位。
我已经更新的HTML代码，现在工作得很好

<style type="text/css"> 

ul {list-style-type:none;margin:0px;padding:0px;} 
ul ul {margin:0px;padding:0px; clear:both} 
ul>li.fila {margin-bottom:5px;padding-bottom:5px;} 

ul li.fila ul li 
{ 
    display:inline; 
    padding-left:20px; 
    position:relative; 
    margin-bottom:10px; 
} 
ul li.fila ul li.O 
{ 
    background:url(bullet.gif) 5px 8px no-repeat; 
    list-style-position:inside; 
} 

</style> 

<ul id="raiz" > 
<li class="fila"> 
    <ul > 
    <li style="position:relative; float:left;left:0px;" class="O"> 
    <label for="col1">Col1:</label> 
    <input type="text" name="col1" id="col1" value="vCol1" class="text ui-widget-content ui-corner-all" /> 
    </li> 
    <li style="position:relative; float:left;" class="O" > 
    <label for="col2">Col2:</label> 
    <input type="text" name="col2" id="col2" value="vCol2" class="text ui-widget-content ui-corner-all" /> 
    </li> 
    </ul> 
</li> 
<li class="fila"> 
    <ul > 
    <li style="position:relative; float:left;"> 
    <label for="col3">Col3:</label> 
    <input type="text" name="col3" id="col3" value="vCol3" class="text ui-widget-content ui-corner-all" /> 
    </li> 
    </ul> 
</li> 
</ul>