Question

我需要将div宽度设置为浏览器默认宽度。这个div包含'ul'和'li'元素。我需要增加div宽度当'li'内容增加时，当浏览器最小化时，这个li元素不应该下降（现在发生）而不是浏览器应该提供horizantal bar。有什么帮助吗？

Div结构

<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

您使用显示属性就像这样

ul li{
display:inline-block;
}

现场演示http://jsfiddle.net/cL9FB/

Answer 2

Rohit很接近，但display: inline-block需要应用于div，而不是li。此外，width: 100%和div上的ul实际上会与您想要的相反;脱掉它。

另外，你不想要自动换行 - 我不确定是否可以用浮点数来实现，但是display: inline-block可以实现，它几乎完全相同。这意味着删除float: left，因为这将覆盖任何显示声明。之后，只需将white-space: nowrap添加到div或ul即可防止自动换行。

使用display: inline-block确实会产生恼人的怪癖，li之间的任何空格都会产生可见的间隙 - 所以你不能在li之间放置任何空格，甚至不能换行。我喜欢通过将结束>符号移动到下一个标记的起始<符号之前来解决此问题 - 这解决了问题，因为>和{{1}之间只有空格计数。

更新的代码：

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

Answer 3

我真的不明白你想做什么，但我会尽我所能。我认为你需要把div宽度放在百分比

div {
  width: 100%;
}

所有其他元素的宽度也应该是百分比

Answer 4

设置所有元素的宽度值（特别是<li>）的百分比，而不是像素; 例如，如果你有5李，给他们宽度：20％。他们的父母;宽度应该是100％

Answer 5

通过它的声音，您需要一种流畅的布局，无论分辨率，浏览器大小或设备如何，都将保持其基本设计，形状和内容布局。说实话，流畅的布局是最好的，并且有许多开源解决方案。

看看这个http://cssgrid.net/

Answer 6

div {
    width:auto;
}

完成工作。

Answer 7

如果您使用的是jquery，那么你可以试试这个

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

根据内容设置div宽度

7 个答案: