是否有一個防彈概念讓h1和p在同一條（基本）線上完全相同？

參見本頁>www.tvdiever.nl 是否有一個防彈概念讓h1和p在同一條（基本）線上完全相同？

HTML：

<div id="slogan"> 
<h1 id="site-name"><span></span><txp:site_name /></h1> 
<p id="site-slogan"><span></span><txp:site_slogan /></p> 
</div>

CSS：

/* @fontface! */ 
/* all fine in all browsers mac or windows */ 
/* h1 and p have more or less the same baseline by giving h1 a line-height of 120% ... */ 

#slogan { 
    height: 3.7em; 
    width: 960px; 
    background-color: #220082; 
    float: left; 
    padding-top: .3em; /* to get h1 and p more or less in the middle of the box! */ 
} 

h1#site-name { 
    margin: 0 0 0 20px; 
    padding: 0; 
    color: #fff; 
    font: normal normal 2.8em/120% FontinSansRegular, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; 
    display: inline !important; 
    vertical-align: text-bottom; 
    float: left; 
} 

p#site-slogan { 
    color: #fff; 
    font: normal normal 1.5em/2.8em FontinSansRegular, 'Lucida Grande', 'Lucida Sans Unicode', sans-serif; 
    margin: 0; 
    padding: 0; 
    display: inline !important; 
    vertical-align: text-bottom; 
    float: left; 
} 

/* end @fontface! */

嗯...它的工作，經過大量調整的......通過給H1線 - 120％（！？）的高度，2.8英寸的線高度，這是h1的字體大小（這是合理的！）...並且當然使得兩個元素都顯示在內...

問題是：是否有一種防彈方法可以將h1和p精確地放在同一行（基本）上，而不管我給他們的字體大小如何？

來源

2011-04-09 redfox

只顯示兩個元素（H1，P）爲內聯元素（display: inline;） - http://jsfiddle.net/Vss8E/

來源

2011-04-09 16:18:00 Crozin

@redfox：該作品，我想，如果你還使用了[CSS樣式表復位（HTTP：//計算器。 com/questions/tagged/css-reset）來減少不同瀏覽器默認值的影響。 **更正**它似乎沒有任何區別：http：//jsfiddle.net/davidThomas/Vss8E/1/（注意左側未勾選的「標準化CSS」）。 – 2011-04-09 16:21:47

由於你的小例子，我忽略了兩個元素的浮動，垂直對齊和行高，這似乎是子彈...... :) – redfox 2011-04-09 16:25:20

@redfox：刪除無用的'float's，'vertical-align's和邊距和填充。你可能想爲容器應用一個填充 - 'div＃slogan'。然後一切工作正常：http://jsfiddle.net/Bdc6g/ – Crozin 2011-04-09 16:27:41

是否有一個防彈概念讓h1和p在同一條（基本）線上完全相同？

回答

相關問題