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 */
}

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

当浏览器扩展时，绝对定位元素会变得混乱

1 个答案: