代码之家 › 专栏 › 技术社区 › Pradyut Bhattacharya

使用css的水平列表中的混乱项

list layout css

Pradyut Bhattacharya · 技术社区 · 14 年前

我做了一个页面,在这个页面中,我使用一个列表来水平显示项目

现在我可以在页面上看到结果了 here

但当我拖动浏览器窗口使其变短时,我会得到一个混乱的列表就像这张照片

我在列表中使用的css是:

#navlist li
        {

            padding: 1em;
            float: left;
            list-style-type: none;
        }

在列表的末尾,我使用了一个清除div

#clear-both 
{
   clear: both;
}

任何帮助

谢谢

普拉杜特

3 回复 | 直到 14 年前

laher 14 年前

我好像无法访问你的网站。

尝试使用display:inline而不是float:left

#navlist li
{
padding-right: 1em;
display: inline;
list-style-type: none;
}

Andy E 14 年前

问题是每个li元素的高度不同。如果为它们提供一个共同的高度,则调整窗口大小时布局将正常流动:

#navlist li
{
    height: 100px;
    padding: 1em;
    float: left;
    list-style-type: none;
}

Pradyut Bhattacharya 14 年前

在另一个div css中使用最小高度可以解决这个问题。

  #another 
  {
      padding: 5px;
      background-color: green;
      min-height: 75px;
  }

谢谢。。。

推荐文章

sanmacorz · 如何在Tkinter上居中放置画布小部件

2 年前

Darkykitsune · 布局大于设备屏幕导致应用程序崩溃

6 年前

Evandro Coan · 如何在不创建填充按钮的情况下填充QHBoxLayout以对齐多个QGroupBox'e?

6 年前

Evandro Coan · QWidget::setLayout:尝试在ProgramWindow“”上设置QLayout“”,该窗口已具有布局

6 年前

Loving Android · Android:Galaxy Nexus GT-I9250在我的布局上崩溃

6 年前

Shariq Ahmed Shah · 滚动时滚动视图具有水平滚动视图滞后

6 年前

user9606220 · 如何将图像添加到顶部布局

6 年前

bhlee · 如何调整qlabel的大小以适应QScrollArea中的内容

6 年前

Abaqus · 如何使TextView字符大小相同?

6 年前

Boucherie · 为Rails中的布局类实例变量选择控制器

6 年前