H1 auf der linken Seite, "Tasten" auf der rechten Seite, vertikal angeordnet

Ich versuche, die Anzeige auf eine Zeile:

  • ein H1-element Links ausgerichtet von der enthaltenden box
  • mehrere "buttons" (A-Elemente) rechts ausgerichtet, der mit box
  • alle auf der selben Basis

Ist es möglich, mit minimalem markup (D. H. ohne Umbruch Elemente) und ohne präzise Höhen, in-line-heights, margin-tops, etc.

<div id="block1">
    <h1>What a great title</h1>
    <a href="javascript:void(0)">This link can kill you</a>
    <a href="javascript:void(0)">Click if you dare</a>
</div>

Fiedel hier zeigt, was ich fühle sind zwei unvereinbare Richtungen (inline-Blöcke und können Sie nicht ausrichten, um die richtige oder float rechts, und Sie können nicht vertikal ausgerichtet):
http://jsfiddle.net/GlauberRocha/bUsvX/

Irgendeine Idee?

InformationsquelleAutor Nicolas Le Thierry d'Ennequin | 2012-09-20
  1. 4

    Haben Sie ein mögliches problem mit diesem layout - was ist, wenn Ihr H1 ist zu lang und so sind die Tasten? Sie laufen in einander. Da dies keine einfache CSS-tun wird, - nicht die CSS Magie - das würde bedeuten, irgendeine Art von Lösung zu den oben genannten problem.

    Jedoch, was Sie wollen können einfach durchgeführt werden mit absoluter Positionierung:

    <div style="position: relative;">
    <h1 style="position: absolute; left: 0; top: 0">What a great title</h1>
    <div style="position: absolute; right: 0; top: 0; text-align: right">
        <a href="javascript: void(0)">This link can kill you</a>
        <a href="javascript: void(0)">Click if you dare</a>
    </div>
</div>

    Wenn du wirklich Angst, dass die Kopf-und die Anker-container laufen würde in jedem anderen je nach generierten Inhalten, Sie können CSS verwenden max-width und overflow Eigenschaften eingeschränkt, die Kisten auf einige sinnvolle Werte. Die überfließende Inhalte werden ausgeblendet, aber zumindest das layout wird nicht brechen, auch optisch. Ich nehme an, die folgende änderung der oben genannten code (verzeihen Sie das doppelte) würde dem Zweck dienen:

    <div style="position: relative;">
    <h1 style="position: absolute; left: 0; top: 0; max-width: 50%; overflow: hidden">What a great title</h1>
    <div style="position: absolute; right: 0; top: 0; text-align: right; max-width: 50%; overflow: hidden">
        <a href="javascript: void(0)">This link can kill you</a>
        <a href="javascript: void(0)">Click if you dare</a>
    </div>
</div>

    Runden Sie nicht erreichen dies über eine einfache CSS-Eigenschaft-Kombination, denn mit CSS (und HTML), der Inhalt fließt von Links nach rechts und von oben nach unten, oder es wird absolut oder fixed positioniert das unterbricht den Fluss. Jedenfalls, es nicht wollen, bleiben auf der gleichen Linie, und Sie als layout designer sind Sie Links mit Auflösung von Mehrdeutigkeiten solche layout einführen würde, wie was zu tun ist, wenn die beiden Züge aus jeder Richtung vor-kollidieren mit einander 🙂

    • Du hast Recht, um das mögliche problem, wenn der Titel oder die Tasten zu lange (obwohl ich bin nicht besorgt, dass hier). Deine Lösung sieht Recht -- trotz der extra-markup!
    InformationsquelleAutor amn
  2. 9

    Habe ich diese auf meine Website ein Recht vor: a h2 auf der linken Seite und ein button auf der rechten Seite. Screenshot:

    H1 auf der linken Seite,

    Code:

    <div id="side_bar" class="clearfix">
  <h2 style="float: left;">Charity Map</h2>
  <button class="btn btn-primary" style="float: right; position: relative; top: 10px; right: 10px;">Submit</button>
</div>
    InformationsquelleAutor Tu H.
  3. 0

    Es ist schwer zu erreichen, ohne das eingliedern von Elementen oder festen Werte...

    Hinzufügen eines festen line-height, um sowohl die Überschrift und die Links lösen würde Ihr problem ziemlich schnell.

    • Richten Sie Ihre Links mit 'display:block; float:right" auf der rechten Seite.
    • Jetzt Setzen Sie "line-height: 40px;", um sowohl die überschrift und die links

    Sollte funktionieren, aber nur, wenn die Größe der überschrift nicht ändern....

    • Nun, ich möchte nicht line-height für die links, weil der hintergrund Farbe. Das würde Aussehen, damit Sie höher als ich wirklich möchte.
    • Ah. okay. Dann ist meine Lösung nicht funktioniert 😀
    InformationsquelleAutor SvenFinke
  4. 0

    Einen möglichen Ansatz, um diese, je nach Ihren genauen Bedarf, ist die Verwendung eines table-layout:

    #block3 {
  display: table;
  width: 100%;
  box-sizing: border-box;
}

#block3 > * {
  display: table-cell;
}

#block3 > *:last-child {
  text-align: right;
}

    JSFiddle: http://jsfiddle.net/bUsvX/39/

    Wenn Sie die Tasten, streng ausgerichtet Recht, ich denke diese Lösung ist ein weiteres element, um wickeln Sie Sie:

    JSFiddle: http://jsfiddle.net/bUsvX/40/

    InformationsquelleAutor robd
  5. -1

    Ich hatte das gleiche Problem.. Hinzufügen display:inline zu den h1 -, dann für die Tasten: float:right; display:inline;

    Beispiel (mit Verwendung von Twitter Bootstrap):

    <h2 style="display:inline">Users</h2>

<a href="users.xls"><i class="icon-download-alt"></i>XLS</a>

<form style="display:inline; float:right;">
   <input type="text" class="input-medium search-query" name="search">
   <button class="btn" type="submit">Search</button>
</form>
    • Ja, ich hatte gedacht, dass die Lösung, aber wenn Sie hinzufügen float:right die display-Eigenschaft tatsächlich zu block (sagt Firebug).
    • Recht. Schweben Sie normalerweise nicht anwenden, um inline-Elemente. Vielleicht haben einige Browser Verhalten sich weired und das Ergebnis ist genau das, was Sie versucht zu erreichen... aber es ist falsch...
    • Ich habe das Beispiel, dass ich einfach kopiert aus der web-Seite.. Hoffe es wird helfen. Wenn Sie hinzufügen, anzeigen in Stil explizit sollte es funktionieren, denke ich..
    • Nein, dein Beispiel funktioniert nicht. Wenn Sie H2 deutlich größer Sie werden selbst sehen. @Gushiken ist richtig.
    • Ok, wenn Sie möchten, um die Grundlinie, es ist nicht möglich, auf diese Weise.. ich war nicht woried über baseline, die viel.. Aber wenn man Feste h1 Größe, die Sie Bearbeiten können, die line-height in Ihre links und stellen Sie gut Aussehen..
    InformationsquelleAutor Mat
Schreibe einen Kommentar