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对话框中的元素...怎么样？

回答

相关问题