html - Divs不会保留内嵌Chrome扩展名

它不仅是div。列表也不会保持内联。我已经尝试了很多事情，无法正常工作。（显示：内联所有内容，并使包装宽度为100％）这对于chrome扩展程序来说是否正常？这是我的HTML，希望您能提供帮助。谢谢！

<!--
<!doctype html>
 This page is shown when the extension button is clicked, because the
 "browser_action" field in manifest.json contains the "default_popup" key with
 value "popup.html".
 -->
<html>
  <head>
    <title>Minds radio</title>
    <style>
html, body {
margin:0;
padding:0;
overflow-y: hidden;
width: 900;
height: 1100;
display: inline;
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
font-size: 100%;
background-color: white;
width: 900;
}
      #status {
        /* avoid an excessively wide status text */
        white-space: pre;
        text-overflow: ellipsis;
      }
    p{
            visibility:visible;
    }

a {
color: #5882C4;
}
.footer {
display: inline !important;
width: 100%;
}
.bloc {
padding: 20;
display: inline;
background-color: black;
}
    </style>

    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
     -->
  </head>
  <body>
    <div id="status">
<center>
<img width="260" height="170" src="http://themindspanel.com/wp-content/uploads/2016/06/mindsradio3-1200x500.jpg"  alt="mindsradio3" /></a>
<center><iframe src="https://mindsradio.airtime.pro/embed/player?stream=auto&amp;title=Minds Radio" width="280" height="216" frameborder="0"></iframe></center>
</center>
<div class="footer" style="display: inline !important; width: 100%;">
  <div><a href="index.html" class="bloc">Radio</a></div>
  <div><a href="schedule.html" class="bloc">Schedule</a></div>
  <div><a href="donate.html" class="bloc">Donate</a></div>
  <div><a href="mindsPanel.html" class="bloc">M-P</a></div>
</div>

</body>
</html>

最佳答案

添加最小宽度：

<!--
<!doctype html>
 This page is shown when the extension button is clicked, because the
 "browser_action" field in manifest.json contains the "default_popup" key with
 value "popup.html".
 -->
<html>
  <head>
    <title>Minds radio</title>
    <style>
html, body {
margin:0;
padding:0;
overflow-y: hidden;
width: 900px;
height: 1100;
display: inline-block;
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
font-size: 100%;
background-color: white;
}
      #status {
        /* avoid an excessively wide status text */
        white-space: pre;
        text-overflow: ellipsis;
      }
    p{
            visibility:visible;
    }

a {
color: #5882C4;
}
.footer {
display: inline-block !important;
width: 100%;
}
.bloc {
padding: 20;
display: inline-block;
background-color: black;
min-width:200px
}
    </style>

    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
     -->
  </head>
  <body>
    <div id="status">
<img width="260" height="170" src="http://themindspanel.com/wp-content/uploads/2016/06/mindsradio3-1200x500.jpg"  alt="mindsradio3" /></a>
<center><iframe src="https://mindsradio.airtime.pro/embed/player?stream=auto&amp;title=Minds Radio" width="280" height="216" frameborder="0"></iframe></center>
</center>
<div class="footer" width: 100%;">
  <span><a href="index.html" class="bloc">Radio</a></span>
  <span><a href="schedule.html" class="bloc">Schedule</a></span>
  <span><a href="donate.html" class="bloc">Donate</a></span>
  <span><a href="mindsPanel.html" class="bloc">M-P</a></span>
</div>

</body>
</html>