对齐内联元素背景顶部

Question

对齐内联元素背景顶部

3

这个问题与这个问题有关：为什么行内非替换元素的计算高度在浏览器之间不同？我有一个行内元素，我使用背景颜色来产生高亮效果。（这是图片的图例。）

我无法准确设置背景高度的渲染，因为字体在不同的浏览器中呈现不同。如果这些略有不同，这并不是问题。

我所需要的只是我的第一行背景的顶部与左侧的图片对齐，在我的jsfiddle中，白色和蓝色需要对齐。有没有办法用CSS实现这个目标？ HTML

<div class="main">
    <div class="float"></div>
    <span>Et quoniam mirari posse quosdam peregrinos existimo haec lecturos forsitan, si contigerit, quamobrem cum oratio ad ea monstranda deflexerit quae Romae gererentur, nihil praeter seditiones narratur et tabernas et vilitates harum similis alias, summatim causas perstringam nusquam a veritate sponte propria digressurus.</span>
</div>

CSS

div.main {
    min-height: 100px;
    background-color: red;
    padding: 10px;
} 

div.float {
    min-height: 50px;
    float: left;
    width: 10px;
    background-color: white;
}

span {
    text-transform: uppercase;
    line-height: 1.5;
    background-color: blue;
    padding-left: 10px;
    padding-right: 10px;
}

http://jsfiddle.net/0ne3pay2/4/

- jillro

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- cнŝdk · Answer 1

我认为最好的方法是使用display:table-cell;与float div和span元素，你可以在这里看到：

div.main {
    min-height: 100px;
    background-color: red;
    padding: 10px;
} 

div.float {
    min-height: 50px;
    float: left;
    width: 10px;
    background-color: white;
    display:table-cell;
}

span {
    text-transform: uppercase;
    line-height: 1.5;
    background-color: blue;
    padding-left: 10px;
    padding-right: 10px;
    display:table-cell;
}

<div class="main">
    <div class="float"></div>
    <span>Et quoniam mirari posse quosdam peregrinos existimo haec lecturos forsitan, si contigerit, quamobrem cum oratio ad ea monstranda deflexerit quae Romae gererentur, nihil praeter seditiones narratur et tabernas et vilitates harum similis alias, summatim causas perstringam nusquam a veritate sponte propria digressurus.</span>
</div>

这将为您提供更好的 span 显示，使其以块而不是行的形式呈现。

编辑：

如果您不希望您的 span 以块的形式呈现，那么您只需要在您的 float div 中添加 margin-top: 3px; 即可，因为这里的问题是由于您的 span 的 line-height: 1.5; 导致的，您有两个选择，要么删除它，要么将边距添加到 div 中。

这是更新后的 Fiddle。

- Akhila Prakash · Answer 2

div.main {
  min-height: 100px;
  background-color: red;
  padding: 10px;
  text-align: justify;
}

- Gereltod · Answer 3

span {
    text-transform: uppercase;
    line-height: 1.5;
    background-color: blue;
    display: block;
    padding-left: 20px;
    padding-right: 10px;
    text-align: justify;
}

http://jsfiddle.net/thisizmonster/0ne3pay2/5/