根據內容設置div寬度

Question

我需要將div寬度設置爲瀏覽器默認寬度。這個div包含'ul'和'li'元素。我需要增加div寬度當'li'內容增加時，當瀏覽器被最小化時，這個li元素不應該下降（現在發生），而是瀏覽器應該提供horizantal吧。任何幫助？

事業部結構

<div style="position:relative;border:1px solid red; line-height:16px;width:100%"> 
    <ul style="position:relative;background:green;height:30px; width:100%;list-style:none; margin:0;"> 
     <li style="position:relative; display:inline-block; padding-left:20px; float:left; background:red" >Welcome</li> 
     <li style="position:relative; display:inline-block; padding-left:20px; float:left; background:red" >Welcome</li> 
     <li style="position:relative; display:inline-block; padding-left:20px; float:left; background:red" >Welcome</li> 
     <li style="position:relative; display:inline-block; padding-left:20px; float:left; background:red" >Welcome</li> 

    </ul> 

</div> 

Answer 1

我真的不明白你想要做什麼，但我會盡我所能。我認爲你需要把DIV寬度百分比

div { 
    width: 100%; 
} 

和所有其他元素也應該有寬度的百分比

Answer 2

喜用顯示屬性像這樣

ul li{ 
display:inline-block; 
} 

現場演示這裏http://jsfiddle.net/cL9FB/

Answer 3

如果你正在使用jQuery，那麼你可以試試這個

$(document).ready(function(){ 
    $("#divId").css("width", $(window).width()+"px"); 
}); 

Answer 4

以百分比形式設置所有元素的寬度值（特別是<li>），而不是以像素爲單位;如果你有5裏，給他們寬度：20％。他們的父母;寬度應該是100％

Answer 5

通過它的聲音，你想要一個流體佈局，將保持其基本的設計，形狀和內容佈局，無論分辨率，瀏覽器的大小或設備。說實話，一個流暢的佈局是最好的，有很多開源解決方案。

看一看這樣做http://cssgrid.net/

Answer 6

div { 
    width:auto; 
} 

工作。

Answer 7

Rohit已關閉，但display: inline-block需要應用於div，而不是li。另外，您的div和ul上的width: 100%實際上會與您想要的相反;把它關掉。

此外，你想要沒有包裝 - 我不確定這是可能實現浮動，但它可能與display: inline-block，這幾乎是相同的事情。這意味着要刪除float: left，因爲這將覆蓋任何顯示聲明。之後，只需將white-space: nowrap添加到div或ul以防止換行。

使用display: inline-block確實產生惱人的怪癖，在li S之間的任何空白將創建一個明顯的差距 - 所以你不能把li S，甚至不換行之間的任何空白。我喜歡通過將結尾>符號移動到下一個標籤的起始<符號來解決這個問題 - 這解決了問題，因爲只有>和<之間的空格纔是重要的。

更新代碼：

<div style="position:relative; border:1px solid red; line-height:16px; display:inline-block"> 
    <ul style="position:relative; background:green; height:30px; list-style:none; margin:0; white-space: nowrap" 
     ><li style="position:relative; padding-left:20px; display:inline-block; background:red" >Welcome</li 
     ><li style="position:relative; padding-left:20px; display:inline-block; background:red" >Welcome</li 
     ><li style="position:relative; padding-left:20px; display:inline-block; background:red" >Welcome</li 
     ><li style="position:relative; padding-left:20px; display:inline-block; background:red" >Welcome</li 
    ></ul> 
</div> 

的jsfiddle：http://jsfiddle.net/gncGX/2/