製作DIV使用剩餘寬度

我已經發現了幾個後有類似的問題，但沒有針對我的具體問題：製作DIV使用剩餘寬度

我創建一個菜單，此HTML代碼：

<ul id="menu"> 
    <li id="item1">Item 1</li> 
    <li id="item2" class="active">Item 2</li> 
    <li id="item3">Item 3</li> 
    <li id="item4">Item 4</li> 
</ul>

我想要做什麼是讓.active元素使用頁面上其餘寬度的剩餘部分。我將在每個LI上點擊事件來切換活動類。

只有css可以做寬度部分嗎？

這裏是CSS我到目前爲止：

ul#menu 
{ 
    list-style:none; 
    background: grey; 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 0; 
    height: 50xp; 
} 

ul#menu li 
{ 
    float:left; 
    height:30px; 
    border:1px solid black; 
    width: 50px; 
} 

ul#menu li.active 
{ 
    /* what to put here to make it use rest of widht */ 
}

這是一起玩的jsfiddle： http://jsfiddle.net/GMpeD/

來源

2012-01-16 funkyfly

你可以做這樣的事情：http://jsfiddle.net/hbQuj/ – 2012-01-16 14:02:07

很好的建議，但我忘了提，別人需要有一個固定的大小。 – funkyfly 2012-01-16 14:18:22

如果'table-cell'不適合你，我相信JS是你唯一的選擇。 – 2012-01-16 14:30:57

將其設置爲表格行，將表格和「活動」單元格的寬度設置爲100％，並防止單元格內出現換行符。演示：http://jsfiddle.net/yucca42/jyTCw/1/

這不適用於舊版本的IE。爲了覆蓋它們，請使用HTML表格並以相似的方式進行設計。

來源

2012-01-16 14:17:19

或首先使用一張桌子。 – Wex 2012-01-16 18:54:18

號您必須添加一些JS將監視窗口大小的變化和調整相應的元素。

來源

2012-01-16 13:56:56

不是在px中給出寬度，而是按百分比設置寬度。

所以你可以有非活動各爲10％，並主動將達到70％

來源

2012-01-16 14:36:17 webdev11

寬度如果你是罰款CSS3，你可以使用箱撓財產。

box-flex屬性指定框的長度如何填充包含該框的框。

試試這個，

#menu { 
    width: 100%; 
    padding: 0;  
    list-style: none; 
    display: -moz-box; /* Mozilla */ 
    -moz-box-orient: horizontal; /* Mozilla */ 
    display: -webkit-box; /* WebKit */ 
    -webkit-box-orient: horizontal; /* WebKit */ 
    display: box; 
    box-orient: horizontal; 
    } 

    .active { 
    -moz-box-flex: 1; /* Mozilla */ 
    -webkit-box-flex: 1; /* WebKit */ 
    box-flex: 1; 
    }

來源

2012-01-16 18:07:17 rahool

這不是一個壞建議。但我認爲它不支持任何IE或Opera。我需要兼容IE8。 – funkyfly 2012-01-17 09:57:52

製作DIV使用剩餘寬度

回答

相關問題