我有一些inline-block元素可以使页面具有一定的宽度。我原以为headerandfooter标签会增加宽度 - 但它们只有浏览器的宽度。这是为什么？以及如何给他们整个页面的宽度？
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;
}