Float right bewegt das Span-Element nach oben?

Question

Hallo ich habe beeen versucht, span und h1 Element auf der gleichen Linie zu machen. float:right wird jedoch dazu führen, dass die Spannweite nach oben verschoben wird. Ich habe mit anderem Ansatz versucht, ich möchte Margin-Eigenschaft nicht verwenden. Irgendwelche Fragen dazu?

<div class="block"> 
    <h1 class="pull-left">Carl</h1> 
    <span class="pull-right">$4.81</span> 
    <div style='clear:both'></div> 
    </div> 

CSS:

.pull-left{ 
    float:left; 
    width:70%; 
} 
.pull-right:{ 
    float:right; 
    width:20%; 
} 

Jede Hilfe würde geschätzt.

Answer 1

Sie haben pull-left Klasse auf <h1> angewendet und alle HTML-Überschriften haben standardmäßig einen bestimmten Rand von Browsern angewendet. Wenn Sie pull-left auf <div> anwenden, sehen Sie keinen zusätzlichen Platz, aber wenn Sie <h1> oder eine andere Überschrift verwenden, müssen Sie den Standard margin aus der Überschrift entfernen.

.pull-left { 
 
    float: left; 
 
    width: 70%; 
 
} 
 
h1.pull-left { 
 
    margin: 0; 
 
} 
 
span.pull-right { 
 
    padding-top: 10px; 
 
} 
 
.pull-right { 
 
    float: right; 
 
    width: 20%; 
 
}

<div class="block"> 
 
    <h1 class="pull-left">Carl</h1> 
 
    <span class="pull-right">$4.81</span> 
 
    <div style='clear:both'></div> 
 
    </div>

Wenn Sie will Überschrift und Spanne als Mitte dann besser ausgerichtet inline-block wie folgt zu verwenden:

.block h1, 
 
.block span { 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
} 
 

 
.block h1 { 
 
    width: 70%; 
 
    margin: 0; 
 
} 
 

 
.block span { 
 
    width: 20%; 
 
}

<div class="block"> 
 
    <h1>Carl</h1> 
 
    <span>$4.81</span> 
 
</div>

Answer 2

dienen zur Anzeige der Inline-CSS-Wert:

<h1 class="pull-left" style="display:inline">Carl</h1> 
<span class="pull-right" style="display:inline">$4.81</span> 

Answer 3

Verwenden Sie line-height, um Texte unterschiedlicher Größe auf derselben Ebene zu erstellen.

.pull-left { 
 
    float: left; 
 
    width: 70%; 
 
    line-height: 30px; 
 
    margin: 0; 
 
} 
 
.pull-right { 
 
    float: right; 
 
    width: 20%; 
 
    line-height: 30px; 
 
}

<div class="block"> 
 
    <h1 class="pull-left">Carl</h1> 
 
    <span class="pull-right">$4.81</span> 
 
    <div style='clear:both'></div> 
 
    </div>

Was wir hier ist getan haben, haben wir beide h1 und span gleiche Höhe, obwohl sie unterschiedliche font-size haben.

Überprüfen Sie die MDN Link:

https://developer.mozilla.org/en/docs/Web/CSS/line-height

Answer 4

Es ist nur die Standard-Marge von h1-Tag, das dies tut, müssen Sie das entfernen.

Wenn Sie wollen, vertikal die Spanne auf h1 basierend Zentrum dann nur line-height verwenden: font-size von h1

Fiddle Here

<div class="block"> 
    <h1 class="pull-left">Carl</h1> 
    <span class="pull-right">$4.81</span> 
    <div style='clear:both'></div> 
</div> 

CSS wie unten

.block h1 
{ 
    margin:0px; 
} 
.block span 
{ 
    line-height:2em; 
} 
.pull-left{ 
    float:left; 
    width:70%; 
} 
.pull-right:{ 
    float:right; 
    width:20%; 
} 

Answer 5

Verwenden Sie die Tabellenzelle & vertikal ausrichten, die Ihren Text gleichmäßig vertikal ausgerichtet

.block{ 
 
display:table; 
 
width:100%; 
 
} 
 
.pull-left{ 
 
    width:70%; 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
} 
 
.pull-right{ 
 
    width:20%; 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
}

<div class="block"> 
 
    <h1 class="pull-left">Carl</h1> 
 
    <span class="pull-right">$4.81</span> 
 
    <div style='clear:both'></div> 
 
    </div>

Answer 6

Fügen Sie diese zu Beginn Ihrer CSS-Datei:

html, body, div, span, applet, object, iframe, 
 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
 
a, abbr, acronym, address, big, cite, code, 
 
del, dfn, em, img, ins, kbd, q, s, samp, 
 
small, strike, strong, sub, sup, tt, var, 
 
b, u, i, center, 
 
dl, dt, dd, ol, ul, li, 
 
fieldset, form, label, legend, 
 
table, caption, tbody, tfoot, thead, tr, th, td, 
 
article, aside, canvas, details, embed, 
 
figure, figcaption, footer, header, hgroup, 
 
menu, nav, output, ruby, section, summary, 
 
time, mark, audio, video { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t border: 0; 
 
\t font-size: 100%; 
 
\t font: inherit; 
 
\t vertical-align: baseline; 
 
} 
 
/* HTML5 display-role reset for older browsers */ 
 
article, aside, details, figcaption, figure, 
 
footer, header, hgroup, menu, nav, section { 
 
\t display: block; 
 
} 
 
body { 
 
\t line-height: 1; 
 
} 
 
ol, ul { 
 
\t list-style: none; 
 
} 
 
blockquote, q { 
 
\t quotes: none; 
 
} 
 
blockquote:before, blockquote:after, 
 
q:before, q:after { 
 
\t content: ''; 
 
\t content: none; 
 
} 
 
table { 
 
\t border-collapse: collapse; 
 
\t border-spacing: 0; 
 
}