Absolut positionierte Elemente vermasseln, wenn Browser skaliert

Ich erstelle Dropdown-Menü für meine Website, sie sehen sehr schön auf Laptop-Auflösung (1280 x 800), aber leider, sie vermasseln sehr schlecht, wenn sie auf größere Größe skaliert werden, trennen sie sich einander, obwohl sie absolut sind.Absolut positionierte Elemente vermasseln, wenn Browser skaliert

HTML-Code einer der Drop-Down-Navigationslinks:

<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>

Bitte beachten Sie, dass ich nicht genau Original-Code hinzugefügt haben, für bestimmte Zwecke. Klasse image(n) zum Beispiel image1, hält Bild neben dem Text, jedoch war fix(n) Klasse für längere Texte, damit es richtig hineinpassen konnte. (Ich habe dafür einen Text-Einzug verwendet).

Full Result. (Es enthält Original-Website-Schaltflächen, für genaue Unterstützung, versuchen Sie, es nach unten und oben zu skalieren).

Ich glaube, ich mache diese Dropdown-Menü falsch, und müssen sie mit verschiedenen Positionstypen machen, ist das wahr? Wenn ja, was muss ich ändern?

Quelle

2016-10-22 ShellRox

Ihr JSFiddle riecht nach CSGO =) – vivekkupadhyay

Was ist das Problem? Es ist wirklich schwer zu verstehen, was hier falsch ist (was bekommst du gegen das, was du erwartest)? – Dekel

Dein Dropdown-Menü sollte mit li erstellt werden. [Hier finden Sie die vollständige Referenz zum Erstellen eines Menüs] (http://stackoverflow.com/questions/6537270/add-sub-sub-menus-to-a-css-menu-with-sub-menus) – NWNishungry

Versuchen Sie es zu beheben, indem Sie die maximale Breite für den Navigationsmenü-Container festlegen.

Der Menüeintrag behält beim Vergrößern oder Verkleinern die gleiche Entfernung bei.

Quelle

2016-10-22 12:53:42 Abk

Das ist eine sehr gute Idee! Ich habe versucht, das auf Dropdown zu tun, Vielen Dank! – ShellRox

Absolut positionierte Elemente vermasseln, wenn Browser skaliert

Antwort

Verwandte Themen