Tasten nebeneinander ausrichten?

Question

Ich habe die folgende Seite:

HTML:

<div class=main> 
    <div class=bttn> 
     <button>abcdef</div> 
    <div class=content> 
     <a href=#!>jksg</a> 
     <a href=#!>jksg</a> 
     <a href=#!>jksg</a> 
     <a href=#!>jksg</a> 
    </div> 
</div> 

<button>abcdef 
    <button>abcdef 
     <button>abcdef 
      </div> 

CSS:

button { 
    border: 3px solid red; 
    border-collapse: collapse; 
    padding: 16px; 
    background-color: blue; 
    width: 25%; 
    margin: 0px -1px 0px -1px display: inline; 
} 

.content { 
    display: none; 
} 

.bttn + .content { 
    display: none; 
} 

.bttn:hover + .content { 
    display: block; 
} 

, wenn Sie den Code ausführen, der erste Knopf allein auf der Linie angezeigt, während der Rest von ihnen arrangieren sich auf der nächsten Linie nebeneinander. Ich denke, das gleiche passiert, wenn ich die versteckten Divs auf den anderen Tasten einfüge. Irgendwelche Möglichkeiten, das zu ändern ?? Ich änderte die Anzeige von Button (das Tag), Bttn (die Klasse) und Inhalt (die Klasse) alle in Inline, aber das Problem bleibt bestehen. Ich denke, dass das Problem von der Positionseigenschaft sein kann, aber ich bin nicht sicher. Wenn das der Fall ist, bitte sagen Sie mir auch, was hier schief geht.

Answer 1

Diese erhalten Sie Ihre Tasten auf einer Zeile

https://jsfiddle.net/2wwfxfqy/1/

Aber Sie haben jetzt das Problem, das zeigt, wie Sie Ihre verborgenen Inhalt erhalten nicht zwingen die anderen 3 unten eine Zeile, wenn Sie wählen, um es anzuzeigen.

ist die CSS mod bisher gemacht

.main button, 
.bttn button { 
    float:left; 
} 

Answer 2

Sie müssen Ihr <button> Tag in der zweiten Zeile und am unteren Rand schließen. Ich habe Ihren Code unten korrigiert, was für mich jetzt gut funktioniert? Ich habe auch Sprachmarkierungen um dein "#" im Anker hinzugefügt.

<div class = main> 
<div class = bttn><button>abcdef</button></div> 
<div class = content> 
<a href = "#">jksg</a> 
<a href = "#">jksg</a> 
<a href = "#">jksg</a> 
<a href = "#">jksg</a> 
</div> 
</div> 



<button>abcdef</button> 
<button>abcdef</button> 
<button>abcdef</button> 

Answer 3

Nicht alle Tags in HTML brauchen einen schließenden Tag haben, aber <button> ist definitiv einer von ihnen. Wie bereits in den Kommentaren erwähnt, ist für dieses Snippet nur einer der beiden Selektoren mit display: none; notwendig, also habe ich einen von ihnen entfernt.

button { 
 
    border: 3px solid red; 
 
    border-collapse: collapse; 
 
    padding: 16px; 
 
    background-color: blue; 
 
    width: 25%; 
 
    margin: 0px -1px 0px -1px; 
 
    display: inline; 
 
} 
 

 
.bttn + .content { 
 
    display: none; 
 
} 
 

 
.bttn:hover + .content { 
 
    display: block; 
 
}

<div class="main"> 
 
    <div class="bttn"><button>abcdef</button></div> 
 
    <div class="content"> 
 
    <a href="#">jksg</a> 
 
    <a href="#">jksg</a> 
 
    <a href="#">jksg</a> 
 
    <a href="#">jksg</a> 
 
    </div> 
 
</div> 
 

 
<button>abcdef</button><button>abcdef</button><button>abcdef</button>

Als Randbemerkung, habe ich die HTML geändert Zitate enthalten. Es ist möglicherweise nicht notwendig für Attribute ohne Leerzeichen (außer Sie verwenden einen XHTML-Doctype), aber Konsistenz ist wichtig - gute Gewohnheiten zu bilden verhindert viele zukünftige menschliche Fehler und Code ist später leichter zu modifizieren. Sie werden feststellen, dass alternierende Doppel/Apostrophe in Situationen bevorzugt, in denen HTML und JS sind gemischt:

• <button onclick="alert('hey');">

• element.innerHTML = '<div class="my-div">hey</div>';

... Wenn Sie die Anführungszeichen ändern In jedem dieser Beispiele ändert sich, wie der Code/das Markup interpretiert wird. Also, wenn Sie konsistent bleiben wollen, wählen Sie eine für Markup und eine für JS-Code, dann bleiben Sie dabei. Allerdings denke ich, dass doppelte Anführungszeichen häufiger in HTML und einfache Anführungszeichen in JS verwendet werden.

AKTUALISIEREN: Ich wollte nur darauf hinweisen, dass doppelte Anführungszeichen in HTML ein Problem werden, wenn Sie jemals data- * -Attribute verwenden, die JSON enthalten. Dies könnte das beste Argument sein, das ich gefunden habe, um das Gegenteil des oben beschriebenen "Standards" zu tun. Sie sollten jedoch noch immer Zitate von einer Art