0

inline-blockページに特定の幅を与える要素がいくつかあります。headerタグとタグが幅を取得すると思っていfooterましたが、ブラウザの幅しかありません。何故ですか？そして、どのようにそれらにページの全幅を与えるのですか?

http://jsfiddle.net/Ft5dC/

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;
  }
4

2 に答える 2

0

ヘッダーとフッターは本当に 100% です。リスト項目が本体の外にあふれています。これにより、キャンバスが大きくなり、全幅ではないように 100% 見えます。OdraEncoded が示唆したように、本体を に設定するinline-blockと、本体がキャンバスの全幅を占めるようになります。これは、ヘッダー/フッターの 100% 幅が全幅をカバーするようになったことを意味します。

于 2020-04-27T12:02:55.590 に答える