如何使Superfish菜單橫向寬度達到100％？

我使用快魚1.4.8爲水平菜單如何使Superfish菜單橫向寬度達到100％？

菜單是900px

一個固定寬度的div我想快魚的寬度爲100％（900px）的內部，並且具有每個L1的寬度根據項目數量自動縮放。此菜單中的項目數量會隨着時間而改變。

基本上我想有一個100％的寬度表的同一行爲和的自動調整大小行爲TD的

我發現從舊的2009年後下面的CSS增加對如何做到這一點：

.sf-menu { width: 100%; float: left; display: table;} 
.sf-menu ul { display: table-row; } 
.sf-menu ul li { display: table-cell; min-width: 20%; }

它看起來像它應該工作，但它沒有，菜單仍然會出現一模一樣的

這是對的jsfiddle： http://jsfiddle.net/xRcJL/

有沒有人能夠將Superfish縮放到100％的容器？

來源

2011-06-01 samJL

您可以製作[jsFiddle demo]（http://jsfiddle.net/）代碼嗎？ – thirtydot 2011-06-01 23:09:47

是的，在這裏你去http://jsfiddle.net/xRcJL/ - 這是標準Superfish.js與superfish.css（和3條線添加到CSS，看到部分標記爲「試圖獲得100％的寬度」） – samJL 2011-06-02 03:27:00

如果菜單在一個固定爲900px的div內，那麼這不就是保持它的大小嗎？ – 2011-06-02 03:35:09

UPDATE：

看看這篇文章對「jQuery的全寬導航插件」：http://exscale.se/archives/2007/11/09/jquery-full-width-navigation-plugin/

這是因爲你的.sf-menu li列表項向左浮動。

退房編輯的jsfiddle與更新的樣式：

.sf-menu li { 
    /*float: left;*/ 
    position: relative; 
}

更新的jsfiddle鏈接：http://jsfiddle.net/xRcJL/1/

如果要居中你的資產淨值，你可以這樣做：

} 
.sf-menu{ 
    text-align:center; 
    background-color:#ccc; 
} 
.sf-menu li { 
    position: relative; 
    display:inline-block; 
    margin:0 -2px; 
}

查看更新JSfiddle v2：http://jsfiddle.net/xRcJL/3/

* 適用於Chrome，Firefox和IE8。未在IE7中測試& 6。

來源

2011-06-02 04:45:03 Dan

這樣比較好，但實際上並沒有將導航擴展到適合空間的位置，在第一個示例中它將其轉換爲垂直導航（它需要保持水平），而在第二個示例中它將導航集中到中心位置，而不是將導航區域拉伸到填充空間（就像表中的td一樣） – samJL 2011-06-02 04:49:17

您可能需要某種javascript才能使Nav擴展爲可用寬度。 – Dan 2011-06-02 06:04:00

被浮起將忽略顯示屬性，以便在代碼.sfmenu沒有顯示作爲表格（在撥弄浮子設置晚得多的代碼）
.sfmenu任何元件是父UL所以它應該是display: table-row;與它的直接孩子li項目是display: table-cell; - .sfmenu ul li是選擇下拉列表中沒有頂級水平的一個
的#container DIV也許應該是一個是display: table;

See this example

如上代碼表示這僅僅是降列出了這是獲得這些屬性，爲什麼第一個層次是不拉伸，儘管我不認爲兒童水平名單會需要他們，但它應該只是第一級。我並不完全確定子菜單定位將正常工作，即使上述內容被糾正爲「真實」表格單元格不接受相對定位，也需要一些下降級別來測試。

來源

2011-06-02 04:58:16 clairesuzy

謝謝clairesuzy，頂級看起來不錯，但添加一個兒童菜單到'家'產生不良結果，看看http://jsfiddle.net/tufgD/ – samJL 2011-06-02 19:45:48

它確實似乎與位置：相對; - [重構示例]（http：// jsfiddle。net/clairesuzy/H7SMG /） - 我已經刪除了所有IE的東西，只是爲了測試定位/顯示和隱藏，但你知道這不會在IE7中工作，因爲它不支持CSS表的屬性，所以'.sfHover選擇器'代碼將無法正常工作（我沒有在8測試）。下拉列表仍然需要一個固定的寬度，因爲他們似乎並不想把他們的父「單元」 – clairesuzy 2011-06-03 06:53:32

我不確定如果這是你所尋找的，但下面這篇文章，做一些實驗，我在這一點上已經到達之後：

http://jsfiddle.net/EFnTa/

希望它能幫助。

來源

2012-01-10 12:05:08 Cris

我不確定你是否使用DNN，但我有從我的超級英雄的皮膚伸展我的超級魚導航容器的想法。這是我做過什麼

#strech_nav 
{ 
    width:100%; 
    height:31px; 
    background:url(images/yournavbg.jpg) repeat-x; 
    z-index: 9; 
} 

#strech_nav #nav 
{ 
    width:900px; 
    height:31px; 
    background:url(images/yournavbg.jpg) repeat-x; 
    font-size:medium; 
    margin:auto; 
    color:White; 
    position: relative; 
    z-index: 9; 

}

然後在ASCX文件

<div id="strech_nav"><div id="nav"><dnn:MENU ID="MENU1" MenuStyle="Superfish" runat="server"/></div></div>

希望幫助:)請注意，這是你想要的，如果你希望你的資產淨值的容器跨越的寬度，用什麼這一頁。如果您希望導航跨越特定的像素寬度，請刪除#stretch_nav的內容並修改#strech_nav #nav

來源

2012-09-14 13:57:28

如何使Superfish菜單橫向寬度達到100％？

回答

相關問題