我正在修补 CSS 网格系统,并且正在制作一个简单的导航栏。 (我知道 flexbox 可能更适合这项任务)。
这些按钮的标题为:按顺序工作、恢复和元素。
我的问题是,因为 Resume 和 Projects 的字符数比 Work 多,当缩小到移动设备时,Work 的间距很好,左边有足够的边距,但 Projects 最终被迫进一步向右移动,最终偏离中心。他们每个人都得到了 1fr 的空间。我能否以某种方式使其动态缩放?
我在想,也许我可以引入一个媒体查询来将字体缩小到一定宽度以下,一切都会好起来的,但我会很感激任何其他建议,因为我更喜欢大而“可触摸”的东西屏幕尺寸。提前致谢。
最佳答案
正如您所说 - flexbox 更适合您想要实现的目标。如果你仍然想使用网格,你应该知道不同长度的单词之间的空间不能相等,除非你给不同的列适当的长度。 这是我所能达到的最好成绩:
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(min-content, 1fr));
}
.item {
padding: 0 1rem;
text-align: center;
border: 1px dashed #000;
}
<div class="grid">
<div class="item">WORK</div>
<div class="item">RESUME</div>
<div class="item">PROJECTS</div>
</div>
关于html - 当单词具有不同数量的带有 CSS 的字符时,如何确保单词间隔均匀?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57336492/