2

我需要将 div 宽度设置为浏览器默认宽度。这个 div 包含 'ul' 和 'li' 元素。我需要增加 div 宽度当“li”内容增加时，并且当浏览器最小化时，这个 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>
4

6 回答 6

6

嗨，像这样使用显示属性

ul li{
display:inline-block;
}

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

于 2012-05-29T07:53:52.737 回答
1

Rohit 很接近，但display: inline-block需要应用于 . 而div不是li. 此外，width: 100%在您的身上div，ul实际上会做与您想要的相反的事情；把它取下来。

此外，您不需要自动换行 - 我不确定这是否可以通过浮点数实现，但可以使用display: inline-block，它几乎可以完成相同的事情。这意味着删除float: left，因为这将覆盖任何显示声明。之后，只需添加或white-space: nowrap以防止自动换行。divul

使用display: inline-block确实会产生烦人的怪癖，即lis 之间的任何空格都会产生可见的间隙 - 所以你不能在lis 之间放置任何空格，甚至换行符也不行。我喜欢通过将结束>符号移动到下一个标签的开始符号之前来处理<这个问题 - 这解决了问题，因为只有和之间的空格才算>数<。

更新代码：

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

于 2012-05-29T09:34:54.703 回答
0 
div {
    width:auto;
}

任务完成。

于 2012-05-29T09:00:04.100 回答
0

我真的不明白你想做什么，但我会尽力而为。我认为您需要将 div 宽度以百分比表示

div {
  width: 100%;
}

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

于 2012-05-29T07:51:09.113 回答
0

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

于 2012-05-29T07:54:27.410 回答
0

听上去你想要一个流畅的布局，无论分辨率、浏览器大小或设备如何，都能保持其基本设计、形状和内容布局。老实说，流畅的布局最适合这一点，并且有许多开源解决方案。

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

于 2012-05-29T08:20:32.403 回答