CSS中的Jquery UI對話框中的元素...怎麼樣？

由於舊版顯然太辛苦爲人們所理解，這裏的HTML，CSS和JavaScript結合：CSS中的Jquery UI對話框中的元素...怎麼樣？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
     <title>test title</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $('#test').dialog({ autoOpen: false, modal: true }); 
       $("#test-link").click(function() { 
        $('#test').dialog('open'); 
       }); 
      }); 
     </script> 
     <style type="text/css"> 
      div#main div#test label { 
       display: block; 
      } 
      div#main div#test input { 
       padding-left: 100px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="main"> 
      <p><a href="#" id="test-link">test</a><p> 
      <div id="test" title="Submit Bug or Feature Request"> 
       <form> 
        <label for="test_desc">Short Description:</label> 
        <input type="text" name="test_desc" id="test_desc" value="" /> 
        <input type="submit" name="" value="Submit" /> 
       </form> 
      </div> 

     </div> 
    </body> 
</html>

對話框工作正常，但CSS沒有。任何想法爲什麼？

來源

2009-06-18 Jeremy Logan

JQuery在DOM樹中移動對話框的DIV，並將其包裝在其他一些DIV中。因此CSS選擇器將不起作用。使用上面的例子，你必須做這樣的事情：

div.ui-dialog div#test label { 
    display: block; 
} 
div.ui-dialog div#test input { 
    padding-left: 100px; 
}

來源

2009-06-19 02:00:03

該css應該工作。這可能是一個問題，如何CSS規則級聯。是否有一個更具體的選擇器應用這些規則，如「#dialog div＃test label」？沒有剩下的html/css就不可能指出具體細節。獲取螢火蟲，看看哪些規則適用於這些元素。

來源

2009-06-19 01:01:55 tom

不知道爲什麼我在這裏投了票。原來的問題有不完整的信息。這是基於原始信息的一個很好的猜測 – tom 2009-06-19 19:49:44

CSS中的Jquery UI對話框中的元素...怎麼樣？

回答

相關問題