2011-10-12 60 views
1

我想找到一種方法,一個iFrame的底部對齊文本的基線的iFrame是內嵌到,在這種情況下,列表項中的文本(HTML低於)。我寧願不修改的iFrame風格(這是生成的代碼),而是與周圍的HTML工作的解決方案。如何對齊的iframe文本基線?

<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> 
+0

不修改的iframe的風格?你想垂直對齊的文字是?我們可以得到一個完整的例子,所以我們有一些工作? –

+0

好像什麼你有一個iFrame做或許應該做AJAX,你會不會有這個問題? – 472084

+0

@Senica,我想將iFrame的底部垂直對齊li標籤中的文本基線,在這種情況下,它是「第一項」。 – Sim

回答

1

給你iframe的一個類或一個id的DIV包裝。我要打電話是包裝<div class="wrapper">

你可以做這樣的事情:如果你知道你的line-height(讓我們說這是16像素)

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

,你可以對包裝做position:relative; top:-16px;

如上所述,您也可以使用vertical-align:bottom,但我不確定這可以滿足您的要求。