HTML-Buttons werden nicht aufhören zu wickeln

Ich habe einige HTML/CSS-Schaltflächen in der Nähe der Spitze meiner Seite nebeneinander aufgereiht. Alles funktioniert gut, wenn die Webseite als normal angesehen wird (Vollbild), aber wenn Sie die Größe des Browserfensters ändern (d. H. Es nicht im Vollbildmodus anzeigen), verschwinden die Schaltflächen. Jede Schaltfläche wird einzeln ausgeblendet, wenn Sie beginnen, die Breite des Browserfensters über die Schaltfläche zu ziehen. Falls ich das nicht gut erklären werde, hier unsere Bilder, die es zeigen.HTML-Buttons werden nicht aufhören zu wickeln

Vor-Taste Ziehen über:

Nach Taste Ziehen über:

ich auf Stack-Überlauf die gemeinsame Lösung für ähnliche Fragen versucht habe, indem „float: left "und" white-space: nowrap "in der CSS-Klasse, aber die Schaltflächen sind immer noch umbrochen. Die HTML die Knöpfe für die Herstellung ist:

<div class="buttons"> 
    <div onmousedown="return false"><a class="aBtn" href="DPS_Guitarspg3.html">Guitars</a></div> 
    <div onmousedown="return false"><a class="aBtn" href="DPS_Guitarspg4.html">Basses</a></div> 
    <div onmousedown="return false"><a class="aBtn" href="DPS_Guitarspg2.html">Our Philosophy</a></div> 
    <div onmousedown="return false"><a class="aBtn" href="DPS_Guitarspg5.html">Custom Orders</a></div> 
    <div onmousedown="return false"><a class="aBtn" href="DPS_Guitarspg6.html">Contact Us</a></div> 
    </div>

Die CSS für die Klasse 'aBtn' ist:

.aBtn { 
    /*left-10 due to automated spaceing in browser*/ 
    text-decoration: none; 
    color:rgb(111,0,100); 
    background-color:rgb(0,0,5); 
    border:1px solid transparent; 
    font-family: "arial"; 
    padding:8px 40px; 
    width: auto; 
    height: 5%; 
    top:60px; 
    float: left; 
    white-space: nowrap; 
}

Jede Hilfe ist willkommen und Dank im Voraus.

Quelle

2016-05-23 FIDGET

Nicht sicher, was Ihr Ziel ist, aber Sie können feste Breite zu Schaltfläche Container hinzufügen .... – sinisake

Ich basiere auf @nevermind sagen Sie die Fixbreite als die Schaltfläche wird nicht gehen ist das, was Sie wollen? https://jsfiddle.net/ych87nz1/ – nonstop328

Was passiert, wenn das Fenster/Container so eng wird, dass sie nicht mehr hineinpassen - kleiner werden, eine Bildlaufleiste haben, vertikal platziert werden, versteckt sein? – Johannes

Verwendung entweder width oder min-width in der Button-Klasse und setzen display entweder Block- oder Inline-Block

Quelle

2016-05-23 19:40:15

Ich bin nicht so sicher, was Ihr Ziel für dieses ist, aber man könnte versuchen zu float die Tasten right eher als left und sehen, ob das einen Unterschied macht.

Quelle

2016-05-23 20:16:34 Lxs29

Das Ziel ist es, dass die Schaltflächen dort bleiben, wo sie sind, wenn die Fensterkante über sie hinweggeht. So sollte die Schaltfläche schließlich nicht mehr erscheinen, obwohl sie technisch gesehen gerade außerhalb des sichtbaren Bildschirms ist – FIDGET

HTML-Buttons werden nicht aufhören zu wickeln

Antwort

Verwandte Themen