我在个人网站上工作时遇到了一个问题:在使用 CSS 和容器使我的列表居中后,页面比显示器宽,导致出现水平滚动条。为什么是这样?相关代码:
HTML:
<h2>My Stack:</h2>
<div class="list">
<ul class="list-unstyled">
<li>Vim</li>
<li>Git</li>
<li>Zsh</li>
<li>Byobu</li>
</ul>
</div>
CSS:
body {
margin: 0 2em 0 2em;
font-size: 18px;
width: 100%;
}
h1, h2, h3, h4, h5, h6, h7 {
text-align: center;
}
p, div.list{
text-align: center;
}
ul {
display: inline-block;
}
实时复制:https://www.k7dxs.xyz/linux.php
理论上,导航栏应该压缩,文本应该换行,对吧?为什么它不起作用?
最佳答案
因为主体上有 2em 边距,为了弥补这一点,您可以使用 width: calc()
,这将设置 100% 宽度减去 4em
体边距。
参见 fiddle :https://jsfiddle.net/5wwg1q5j/55/
body {
margin: 0 2em 0 2em;
font-size: 18px;
width: calc(100% - 4em);
}
关于html - 为什么这个页面比显示器宽?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36780288/