jquery - HTML div 在某些缩放级别似乎无法对齐

Question

我正在尝试创建一个包含 3 个部分的页眉，每个部分跨越页面的 1/3。

.container-header {
            color: white;
            background: #28939D;
            height: 48px;
            padding-top: 20px;
            padding-left: 24px;
}

<div style='width:calc(100% / 3);'>
    <div class='container-header'>
        <svg width='26' height='29' viewBox='0 0 26 29' fill='none' xmlns='http://www.w3.org/2000/svg'>
            <path fill-rule='evenodd' clip-rule='evenodd' d='<code needed to make the icons>' fill='white'/>
        </svg>
        <p class='header-text'></p>
    </div>
</div>

这 3 个都有相同的 svg 大小信息和相同的父样式，宽度为 33%。

不幸的是，根据缩放级别，中间部分的底部边缘似乎会渗出一两个像素，并且其左侧有时有几乎白色的边框。下面是正常完全缩小比例的图像，稍微放大一点，然后尽可能放大。 HTML 变成 PDF，屏幕截图取自 PDF View (不是浏览器中显示的实际 HTML 页面。)

完全缩小

放大一点

放大更多

有人见过这样的事情吗？

Answer 1

您可以使用 Flexbox 来控制菜单布局，请查看此示例:

.navigation {
  width: 100%;
  padding: 0px;
  list-style: none;
  background: deepskyblue;
  display: flex;
  flex-flow: row no-wrap;
  border-radius:5px 5px 0px 0px;
}

.navigation li {
  flex: 1 0;
}

.navigation a {
  text-decoration: none;
  display: block;
  padding: 1em;
  color: white;
}

.navigation a:hover {
  background: #00b7f5;
}

<ul class="navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Products</a></li>
</ul>