2

我想为我的 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 就可以了： 在此处输入图像描述

但是如果我在 chrome 扩展中打开它看起来很奇怪： 在此处输入图像描述

我不知道如何解决它，而且我是制作 html 应用程序的新手。也许这是一个非常简单的问题，但请帮助我，非常感谢

4

1 回答 1

2

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

您需要在这里做的是在 div 上明确定义一个包含所有其他内容的宽度。尝试这样的事情

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

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

于 2013-06-15T17:45:33.537 回答