html - 绝对定位元素在浏览器缩放时困惑

Question

我正在为我的网站创建下拉菜单，它们在笔记本电脑分辨率 (1280 x 800) 上看起来非常好，但不幸的是，当它们放大到更大的尺寸时，它们会变得非常糟糕，它们会分开彼此之间，即使它们是绝对的。

其中一个下拉导航链接的 HTML 代码:

<ul class="down-bar" style="list-style:hidden">
    <div class="dropdown">
        <input type="checkbox" value="drop" id="drop-1" class="dropper">
        <li><label class="down-nav" id="down-nav-1" for="drop-1" style="text-decoration:none">Buttons <b class="caret"> &#9660;</b></label></li>
        <div class="dropdown-menu">
            <a href="#" class="fix1"><label class="image1" style="width:30px;height:30px;position:absolute;top:1%;left:3%;cursor:pointer;"></label>Btn</a>
            <a href="#"><label class="image2" style="width:30px;height:30px;position:absolute;left:3%;top:11%;cursor:pointer;"></label>Btn</a>
            <a href="#"><label class="image3" style="width:30px;height:30px;position:absolute;left:3%;top:21%;cursor:pointer;"></label>Btn</a>
            <a href="#" class="fix2"><label class="image4" style="width:30px;height:30px;position:absolute;left:3%;top:31%;cursor:pointer;"></label>Btn</a>
            <a href="#"><label class="image5" style="width:30px;height:30px;position:absolute;left:3%;top:41%;cursor:pointer;"></label>Btn</a>
            <a href="#" class="fix3"><label class="image6" style="width:30px;height:30px;position:absolute;left:0.7%;top:51%;cursor:pointer;"></label>Btn</a>
            <a href="#"><label class="image7" style="width:30px;height:30px;position:absolute;left:0.7%;top:61%;cursor:pointer;"></label>Btn</a>
            <a href="#" class="fix4"><label class="image8" style="width:30px;height:30px;position:absolute;left:1.5%;top:71%;cursor:pointer;"></label>Btn</a>
            <a href="#" class="fix5"><label class="image9" style="width:30px;height:30px;position:absolute;left:0.7%;top:81%;cursor:pointer;"></label>Btn</a>   
            <a href="#" class="fix6"><label class="image10" style="width:30px;height:30px;position:absolute;left:1%;top:91%;cursor:pointer;"></label>Btn</a>                    
        </div>
    </div>

请注意，出于特定目的，我没有添加确切的原始代码。类 image(n) 例如 image1，在文本旁边保存图片，但是 fix(n) 类用于较长的文本，因此它可以适本地适应。 (我为此使用了文本缩进)。

---

Full Result . (它包括原始网站按钮，要获得精确支持，请尝试将其缩小和放大)。

我想我把这些下拉菜单弄错了，需要用不同的位置类型来制作它们，是这样吗？如果是这样，那么我需要更改什么？

Answer 1

尝试通过设置导航菜单容器的最大宽度来修复它。

.down-bar{
  max-width: 1200px; /* try different value */
}

菜单项在放大或缩小时将保持相同的距离。