ui選項卡和位置相對

我使用ui選項卡很多。在我上一個項目中，我在標籤之前添加了一個圖標，並且標籤鏈接開始了一個奇怪的行爲，如果您位於標籤名稱之上，則無法單擊更改選項卡但只有當你在標籤名稱之外。ui選項卡和位置相對

下面是代碼

<div style="float:left;display:inline;width:718px;padding:5px;border:1px solid #ececec"> 
    <!--ICON just before TABs--> 
<div style="z-index:1;position:relative;top:30px;left:5px"> 
    <img src="../graphics/icons/add.gif" onclick="AddTab();" href="javascript:void(0);" id="addNewTab"/> 
</div> 

<div id="tabs" > 
    <ul > 
     <li > 
      <img src="../graphics/icons/x.gif" onclick="RemoveTab(this)" style="cursor: pointer;" /> 
      <a href="#tab-1"><span id="tabContent-1"><span class="tabText" >TAB1</span></span></a> 
     </li> 
     <li > 
      <img src="../graphics/icons/x.gif" onclick="RemoveTab(this)" style="cursor: pointer;" /> 
      <a href="#tab-2"><span id="tabContent-2"><span class="tabText" >TAB2</span></span></a> 
     </li> 
    </ul>    

    <div id="tab-1" > 
     contents  
    </div> 
    <div id="tab-2" > 
     contents  
    </div> 

</div><!--tabs-->

我知道ui.css具有相對的標籤

.ui-tabs .ui-tabs-nav { 
     list-style:none outside none; 
     padding:0.2em 0.2em 0; 
     position:relative; 
    }

位置，我不知道如果我的圖標齧合起來。

如果我刪除的位置：從圖標相對（add.gif）一切工作正常

任何幫助表示讚賞

來源

2010-04-10 ntan

你可以發佈一個鏈接到現場演示？無論瀏覽器，這種情況都是如此嗎？ – 2010-04-10 19:38:18

從您發佈的代碼，如果我理解你的問題正確地說，圖標div中的「top：30px」會干擾您的標籤頁。圖標圖像的高度沒有宣佈，但我假設它小於30px。因此，假設您的圖標的z-index爲1，它將出現在選項卡頂部。

如果圖標的目的是出現在與選項卡相同的行上，這可能仍會出現，因爲圖標的父div沒有聲明寬度。這意味着它可能佔用整行。

有幾種方法可以解決這個問題，但我認爲您最好能夠提出正確的解決方案，具體取決於您要達到的確切效果。罪魁禍首似乎是「top：30px」，將div壓低30px。如果你刪除它，你也可能會從同一個div中刪除「position：relative」。

希望有所幫助。

來源

2010-04-10 21:28:29 Tom

這很可能是IE hasLayout錯誤，並且圖像不會強制標籤的高度按預期更改。這可以通過將zoom：1添加到任何位置來解決：相對元素。

你也可能要添加填充有4種規格，像這樣......

.ui-tabs .ui-tabs-nav { 
    list-style:none outside none; 
    padding:0.2em 0 0.2em 0; 
    position:relative; 
    zoom:1; }

希望幫助！

來源

2010-04-12 03:56:51 Banzor

ui選項卡和位置相對

回答

相關問題