Überschrift und Spannen in der gleichen Zeile

-4

Ich erzeuge divs dynamisch und brauche eine Lösung genau so (kein externer Stil oder CSS, weil sie ignoriert werden, wenn sie dynamisch nach dem Laden der Seite generiert werden). Ich verstehe nicht, warum der Browser meine Textausrichtung ignoriert: richtig. Auch ich will h behalten und spanne (kein p). Normalerweise sollten wir h nach links und Spanne nach rechts auf der gleichen Grundlinie sehen:Überschrift und Spannen in der gleichen Zeile

<!DOCTYPE html> 
<body> 

<div style="background-color:green;color:white;"> 
    <h1 style="display:inline">Green, color of hope</h1> 
    <span style="text-align:right">I hope to display this to the right</span> 
</div> 

</body> 
</html>

Quelle

2016-05-14 Philippe Brodeur

'text-align: right' richtet Inline Inhalt rechts von einem Blockelement mit dem Attribut. span ist inline. hast du 'float: left' auf der h1 und' float: right' auf der span und 'overflow: hidden' auf der wrapper div versucht. das heißt, Sie sollten wahrscheinlich mehr semantisches Markup anstreben, verknüpfte Stylesheets sollten auch nicht ignoriert werden ... dynamischer Inhalt ist nicht wirklich eine Ausrede für schlechtes Markup –

Von dem, was ich Freitag versucht hatte, würde ich alles zwischen Style Tags hinzufügen (oder in ein CSS-Sheet) würde auf Elementen ignoriert werden, die dynamisch nach dem Laden der Seite hinzugefügt werden, also obwohl es normal war und nur der Inline-Stil an diesem Punkt funktionieren würde. Nein, ich hatte auch keinen großen Erfolg mit Float, weil der Text rechts oben ausgerichtet ist, nicht die Basislinie ... –

ich dran viel und entscheiden, zu verwenden, Dies ist die einfachste Lösung für mein Problem. Beachten Sie, dass so viele Lösungen rund um die Web vorgeschlagen werden, selten sind solche praxisnah erläutert (in einfacher Art und Weise), um das Problem für Elemente Baseline während unterschiedlicher Größe sein ausgerichtet sein:

<style> 
    .left{text-align:left;font-size:18px;font-weight:bold;} 
    .right{float:right;font-size:14px;padding-top:4px} 
</style> 

<span class='left'>Left</span><span class='right'>Right</span>

Quelle

2016-05-18 13:17:57

Flexbox das tun können:

<div style="background-color:green;color:white; display:flex; justify-content:space-between; align-items:baseline;"> 
 
    <h1>Green, color of hope</h1> 
 
    <span>I hope to display this to the right</span> 
 
</div>

Quelle

2016-05-14 21:32:09

Ich führe das Snippet gerade aus und rechter Text wird in der Mitte ausgerichtet, nicht an der Basislinie. Ich werde es morgen an meinem wirklichen Ziel versuchen. Danke. –

Überschrift und Spannen in der gleichen Zeile

Antwort

Verwandte Themen