Metro UI CSS로 크롬 확장을 만드는 방법은 무엇입니까?

크롬 확장을위한 Metro UI를 구현하고 싶습니다. 난 그냥 다음과 같은 페이지 제어 예제 코드를 사용 :Metro UI CSS로 크롬 확장을 만드는 방법은 무엇입니까?

<!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

을하지만 내가 크롬 확장 프로그램에서 열 경우 이상한 같습니다 enter image description here

나는 그것을 고치는 법을 모르며, 나는 html 응용 프로그램을 만드는 새로운 방법이다. 어쩌면 이것은 매우 간단한 질문이지만, 제발 도와 줘서 고마워요.

출처

2013-06-15 remykits

표준 웹 브라우저 창에서 HTML을 렌더링하면 마크 업이 달리 지시하지 않는 한 페이지의 너비를 채우기 위해 늘립니다. 이것을 Chrome 팝업 창으로 옮기려고하면 기본 팝업 상자 크기로 찌그러지게됩니다.

여기서해야 할 일은 명시 적으로 div의 너비를 정의하여 다른 모든 콘텐츠를 감쌀 수 있습니다. 아마도 CSS 클래스 page-control 이미 CSS에서 정의 된 일부 폭을 가지고 있지만이 코드 샘플에 노출 아니에요 나는 전체 CSS 경로를 볼 수없는이

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

같은 것을보십시오. 그럼에도 불구하고 위의 명시 적으로 정의 된 너비가이를 무시합니다.

출처

2013-06-15 17:45:33 QFDev

감사합니다. 그것은 작동한다. – remykits

Metro UI CSS로 크롬 확장을 만드는 방법은 무엇입니까?

답변

관련 문제