浮動右移span元件？

Question

嗨，我一直努力使span和h1元素在同一行。但是float:right將導致跨越頂部。我嘗試過不同的方法，我不想使用保證金屬性。對此有何評論？

<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%; 
} 

任何幫助，將不勝感激。

Answer 1

您已在<h1>上應用pull-left類，並且所有的html標題默認都有一些瀏覽器應用的餘量。如果您將pull-left應用到<div>那麼您將不會看到任何額外空間，但如果您將使用<h1>或其他標題，則需要從標題中刪除默認margin。

.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>

如果你想要航向和跨度中間對齊，然後更好地使用inline-block如下：

.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

使用內嵌式地顯示CSS值：

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

Answer 3

使用line-height可以在同一級別製作不同大小的文本。

.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>

我們在這裏做，我們做了兩個h1和span相同的高度，即使他們有不同的font-size。

檢查MDN鏈接：

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

Answer 4

它只是默認h1標籤的是這樣做保證金，你需要刪除。

如果你想垂直居中基於H1那麼就使用的line-height跨度：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的字體大小如下

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

Answer 5

使用表格&垂直對齊，同樣垂直對齊文字

.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

添加這在你的CSS文件的開頭：

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; 
 
}