Question

我想为我的Chrome扩展程序实现Metro UI。我只是使用页面控件示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample</title>
  <link href="css/modern.css" rel="stylesheet" media="screen">
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="javascript/dropdown.js"></script>
  <script type="text/javascript" src= "javascript/pagecontrol.js"></script>
</head>
<body class="metrouicss">
  <div class="page-control" data-role="page-control">
        <!-- Responsive controls -->
        <span class="menu-pull"></span> 
        <div class="menu-pull-bar"></div>
        <!-- Tabs -->
        <ul>
            <li class="active"><a href="#frame1">Frame1</a></li>
            ...
            <li><a href="#frameN">FrameN</a></li>
        </ul>
        <!-- Tabs content -->
        <div class="frames">
            <div class="frame active" id="frame1"> ...frame content... </div>
            ...
            <div class="frame" id="frameN"> ...frame content... </div>
        </div>
    </div>
</body>
</html>

如果我在网络浏览器中打开popup.html，那就没关系了： enter image description here

但是如果我在chrome扩展程序中打开它看起来很奇怪： enter image description here

我不知道如何修复它，我是一个新的html应用程序。也许这是一个非常简单的问题，但请帮助我，非常感谢

Answer 1

当您在标准Web浏览器窗口上呈现HTML时，它将拉伸以填充页面的宽度，除非标记另有说明。当您尝试将其转置到Chrome弹出窗口时，它会被压缩到默认的弹出框大小。

您需要在此处明确定义包含所有其他内容的div上的宽度。试试这样的事情

 <div class="page-control" data-role="page-control" style="width:600px;">
 ...
 ...
 </div>

也许css类page-control已经在CSS中定义了一些宽度，但我看不到完整的CSS路径，因为它没有在代码示例中公开。无论如何，上面明确定义的宽度将覆盖它。

如何使用Metro UI CSS制作Chrome扩展程序？

1 个答案: