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>