重疊標籤容器列表項目

當然，這是一個簡單的解決方案，但我正在努力解決它。我有一個包含大約3個列表項的選項卡式容器，其中每個列表項都有超鏈接。當我縮小瀏覽器窗口的大小時[讓我們從右邊看]它不會將元素隱藏到最右側，而是縮小列表項的大小，然後在其他兩個列表項的寬度之下進行調整。重疊標籤容器列表項目

我有最小寬度設置爲相同的元素的寬度。

哪裏需要調整？

這裏是語義結構

<div id = "tabbed"> 
    <ul> 
    <li><a href = "#tab_1">Tab 1</a></li> <!-- 3 list items --> 
    </ul> 
    <div class = "tabs" id = "tab_1"> <!--3 tabs, each tab corresponds to the link in the list item --> 
    </div> 
</div>

這裏是CSS：

#tabbed 
{ 
width :80%; 
margin:auto; 
margin-top:20px; 
} 

#tabbed ul{ 
margin:0px; 
margin-top:15px; 
} 

#tabbed li 
{ 
display: inline-block; 
list-style-type:none; 
border:1px solid #ccc; 
border-bottom: 0px; 
border-top-left-radius:4px; 
border-top-right-radius:4px; 
margin-right:5px; 
margin-top:5px; 
padding:4px 4px 10px 4px; 
width: 30%; 
background:#87CEEB; 
} 

#tabbed a{ 
font-family:Arial, Helvetica, sans-serif; 
font-size: 13px; 
font-weight:bold; 
color: #7F818B; 
display:block; 
text-align:center; 
text-decoration:none; 
margin-top:5px; 
margin-bottom:5px; 
}

來源

2012-08-02 user1020069

發佈您的代碼或最好鏈接到現場示例會有所幫助。 – 2012-08-02 01:22:11

是的，請給我們一些例如HTML和CSS /樣式，你在做什麼。瀏覽器包裝內容的方式很大程度上取決於實現。我假設你正在使用CSS顯示：內聯使列表水平？

來源

2012-08-02 01:27:29 Revent

使用display：inline-block將其設置爲水平，出於某種原因顯示：inline不完全按照它應該的方式運行，可能會覆蓋我在此處使用的其他css樣式表，但稍後我會着手... 。謝謝！ – user1020069 2012-08-02 18:37:47

我剛剛分享了CSS和語義標記 – user1020069 2012-08-02 18:38:18

沒有任何代碼來看看，我可以建議如下：

嘗試

your_div {overflow:hidden;}

對於初學者來說，

其次，最小寬度僅僅由瀏覽器的一半了觀察那裏。我會建議嘗試不同的方法來設置最小寬度，以及代碼示例以獲得最佳效果:)

來源

2012-08-02 02:28:11 FredTheWebGuy

nope，overflow：hidden並沒有完全解決問題，您是否想看看我剛剛放入的代碼並查看結果？ – user1020069 2012-08-02 18:35:42

重疊標籤容器列表項目

回答

相關問題