Question

我有一些inline-block元素可以为页面提供一定的宽度。我原以为header和footer标签会占用宽度 - 但它们只有浏览器的宽度。这是为什么？以及如何给它们整个页面宽度？

HTML：

<body>
  <header>
  HEADER
  </header>

  <ol>
    <li><img src="img/slides/boy.jpg"/></li>
    <li><img src="img/slides/bridge.jpg"/></li>
    <li><img src="img/slides/guitar.jpg"/></li>
    <li><img src="img/slides/iphone.jpg"/></li>
  </ol>

  <footer>
  FOOTER
  </footer>
</body>

的CSS：

  * {
    border: 0;
    margin: 0;
    padding: 0;
  }
  body {
    background-color: gray;
  }
  header {
    background-color: yellow;
  }
  footer {
    background-color: yellow;
  }
  ol {
    display: inline-block;
    white-space: nowrap; 
    font-size: 0;
    background-color: blue;
  }
  li {
    display: inline-block;
    list-style-type: none;
    white-space: normal;
  }
  img {
    width: 300px;
    height: 300px;
    margin: 40px;
  }

Answer 1

我不确定你在问什么。

如果您希望整个页面具有最大元素的宽度，请添加此CSS

body { display: inline-block; }

Answer 2

页眉和页脚实际上是100％。列表项溢出体外。这会导致画布变大，看起来不是整个宽度的100％。如OdraEncoded建议的那样，将主体设置为inline-block会使主体占据画布的整个宽度。这意味着页眉/页脚的100％宽度现在可以覆盖整个宽度。

体宽和内联块元素

2 个答案: