H1 auf der linken Seite „Tasten“ auf dem rechten, vertikal ausgerichtet

Question

Ich versuche auf einer Zeile angezeigt werden:

• ein H1 Element links von dem Aufnahmefeld ausgerichtet
• mehrere „Buttons "(A Elemente hier) ausgerichtet ist rechts von dem Aufnahmekasten
• alle auf der gleichen Grundlinie sein

Ist es möglich, dies mit einem minimalen Auszeichnungs zu tun (dh keine Hüllelemente) und ohne präzise einzustellen Höhen, Linie-hei ghts, 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> 

Die Geige hier zeigt was ich fühle sind zwei unvereinbare Richtungen (Inline-Blöcke und Sie können nicht nach rechts gegen Schwimmer rechts ausrichten und Sie können nicht vertikal ausrichten): http://jsfiddle.net/GlauberRocha/bUsvX/

Irgendeine Idee? ..

Answer 1

Sie haben ein mögliches Problem mit diesem Layout - Was ist, wenn Ihre H1 zu lang ist und auch die Tasten? 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.

Aber was wollen Sie kann einfach erreicht werden, die absolute Positionierung mit:

<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 Sie wirklich Angst haben, dass der Header und der Anker Behälter könnte laufen in einander auf generierten Inhalten abhängig, können Sie CSS max-width und overflow Eigenschaften, um ihre enthaltenen Felder auf einige sinnvolle Werte zu beschränken. Der überlaufende Inhalt wird ausgeblendet, aber das Layout wird zumindest visuell nicht unterbrochen. Ich gehe davon aus der folgenden Änderung des obigen Codes (verzeihen Sie das Duplikat) würde den 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> 

Zur Abrundung Sie nicht erreichen dies eine einfache CSS-Eigenschaft Kombination zu verwenden, da mit CSS (und HTML) Inhalt fließt von links nach rechts und von oben nach unten, oder es wird absolut- oder festpositioniert, wodurch der Fluss unterbrochen wird. 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 aus jeder Richtung frontal aufeinanderprallen:

)

Answer 2

hatte ich das gleiche Problem display:inline zum h1 hinzufügen, dann für Schaltflächen: float:right; display:inline;

Beispiel (unter 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> 

Answer 3

Es ist schwer, ohne Hüllelemente oder feste Werte ...

Hinzufügen einer sowohl feste line-height der Überschrift zu erreichen und die Links würde Ihr Problem ziemlich schnell lösen.

• Richten Sie Ihre Links mit 'display: block; schweben: rechts 'nach rechts.
• Setzen Sie jetzt "line-height: 40px;" sowohl auf die Position und die Links

funktionieren sollte, aber nur, wenn die Größe der Überschrift nicht ändert ....

Answer 4

Ich tat dies auf meiner Seite ein ganz vor: ein h2 auf die links, und ein Knopf auf der rechten Seite. Bildschirmfoto: cl.ly/image/3K3i412F0M2t

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> 

Answer 5

Ein möglicher Ansatz dazu, je nach Ihrem genauen Bedarf, ist ein Tabellenlayout zu verwenden:

#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 möchten, dass die Schaltflächen genau ausgerichtet sind, muss diese Lösung ein anderes Element enthalten:

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