Question

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％（！？），pa行高为2.8em，这是h1的字体大小（这是有道理的！）...当然，这两个元素都显示为内联...

问题是：是否有一种防弹方法可以将h1和p精确地放在同一（基线）线上，无论我给它们什么字体？

Answer 1

只需将两个元素（H1，P）显示为内联元素（display: inline;） - http://jsfiddle.net/Vss8E/

是否有一个防弹概念，以获得h1和p精确在同一（基线）线？

1 个答案: