如何将iframe与文本基线对齐？

Question

我想找到一种方法将iFrame的底部与iFrame内联的文本基线对齐，在本例中是列表项内的文本（HTML在下面）。我更喜欢不修改iFrame样式（生成代码）的解决方案，而是使用周围的HTML。

    <ul class="itemList">
        <li class="item">
            first item
            <div style="display: inline-block; margin-left: 20px;">
                <iframe scrolling="no" style="border: 0; width: 80px; height: 16px;">
                    <!-- iframe content here -->
                </iframe>
            </div>
        </li>
    </ul>

Answer 1

为iframe提供DIV包装器类或id。我要打电话给包装器<div class="wrapper">

你可以这样做：

<style>
li.item{ position:relative; }
.wrapper{ position:absolute; bottom:0px; right:0px; }
</style>

如果你知道你的行高（假设它是16px），你可以在包装器上做position:relative; top:-16px;。

如上所述，您也可以使用vertical-align:bottom，但我不确定这是否适用于您想要的内容。