Css 根据内容设置div宽度

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

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>

欢迎光临
欢迎光临
欢迎光临
欢迎光临

我不太明白你想做什么，但我会尽力的。我想你需要把div的宽度用百分比表示

div {
  width: 100%;
}

---

所有其他元素也应该具有百分比宽度，如下所示

ul li{
display:inline-block;
}

---

此处的实时演示

以百分比而非像素设置所有元素（尤其是

）的宽度值；

---

例如，如果你有5里，给他们宽度：20%。他们的父母；s的宽度应为100%

根据它的声音，您需要一个流畅的布局，无论分辨率、浏览器大小或设备如何，都能保持其基本设计、形状和内容布局。老实说，流体布局是最好的，有很多开源解决方案

看看这个

---

工作完成。

Rohit已关闭，但需要将

显示：内联块应用于
div
，而不是
li
。另外，
width:100%
在你的
div
和
ul
上实际上会做与你想要的相反的事情；把它脱下来

另外，您不需要换行-我不确定是否可以通过浮动实现，但可以通过
display:inline block
实现，这几乎实现了相同的功能。这意味着删除
float:left
，因为这将覆盖任何显示声明。之后，只需在
div
或
ul
中添加
white space:nowrap
，以防止单词换行

使用
display:inline block
确实会产生一个恼人的怪癖，即
li
s之间的任何空白都会产生一个可见的间隙-因此您不能在
li
s之间放置任何空白，甚至不能换行。我喜欢通过将结尾的
符号移动到下一个标记的开始的
和
之间的空格，给定代码的结果不符合我的要求。li元素应该向左浮动。当浏览器最小化时，li元素不应该下降。哎哟-显然我的代码修剪过度了。我编辑了我的答案，只是为了做一些真正必要的修改——希望它现在能满足你的要求。你能更详细地解释一下你的答案吗？tnx
div {
    width:auto;
}

<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>