Ich versuche, in einer Zeile anzuzeigen:
Ist es möglich, dies mit minimalem Markup (d. h. ohne Umhüllungselemente) zu tun und ohne genaue Höhen, Linienhöhen, Randbereiche usw. einzustellen.
%Vor%Die Geige hier zeigt, was ich fühle, sind zwei inkompatible Richtungen (Inline-Blöcke und Sie können nicht nach rechts gegen Float rechts ausrichten und Sie können nicht vertikal ausrichten): Ссылка
Irgendeine Idee?
Sie haben ein potentielles Problem mit diesem Layout - was ist, wenn Ihr H1 zu lang ist und auch die Schaltflächen? Sie werden ineinander rennen. Aus diesem Grund wird kein einfaches CSS funktionieren - CSS mag das nicht - es müsste eine Art Lösung für das obige Problem bedeuten.
Was Sie jedoch wollen, können Sie einfach mit absoluter Positionierung erreichen:
%Vor% Wenn Sie wirklich Angst haben, dass der Header und der Ankercontainer je nach generiertem Inhalt ineinander laufen könnten, können Sie mit den CSS max-width - und overflow -Eigenschaften ihre enthaltenen Boxen auf einige sinnvolle Werte beschränken. Der überlaufende Inhalt wird ausgeblendet, aber das Layout wird zumindest visuell nicht unterbrochen. Ich nehme an, die folgende Änderung des obigen Codes (Verzeihung des Duplikats) würde dem Zweck dienen:
Zum Schluss können Sie dies nicht mit einer einfachen CSS-Eigenschaftskombination erreichen, denn mit CSS (und HTML) fließt Inhalt von links nach rechts und von oben nach unten, oder er wird absolut- oder fest positioniert, der den Durchfluss unterbricht. Wie auch immer, es möchte nicht auf der gleichen Linie bleiben, und Sie als Layouter werden mit auflösenden Zweideutigkeiten konfrontiert, die ein solches Layout mit sich bringen würde, wie zum Beispiel, wenn die zwei Züge, die aus jeder Richtung fahren, frontal kollidieren: )
Ich habe das vor ziemlich langer Zeit auf meiner Seite gemacht: eine h2 auf der linken Seite und eine Schaltfläche auf der rechten Seite. Screenshot: cl.ly/image/3K3i412F0M2t
Code:
%Vor%Ohne Umhüllungselemente oder feste Werte ist es schwer zu erreichen ...
Wenn Sie sowohl der Überschrift als auch den Links eine feste Zeilenhöhe hinzufügen, löst sich Ihr Problem ziemlich schnell.
Sollte funktionieren, aber nur, wenn sich die Größe der Überschrift nicht ändert ....
Ich hatte das gleiche Problem .. Fügen Sie display:inline zur h1 hinzu, dann zu Schaltflächen: float:right; display:inline;
Beispiel (unter Verwendung von Twitter Bootstrap ):
%Vor%Tags und Links css vertical-alignment alignment css-float