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

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

list layout css

1

Pradyut Bhattacharya · 技术社区 · 16 年前

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

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

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

我在列表中使用的css是:

#navlist li
        {

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

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

#clear-both 
{
   clear: both;
}

任何帮助

谢谢

普拉杜特

3 回复 | 直到 16 年前

1

laher 16 年前

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

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

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

2

1

Andy E 16 年前

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

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

3

0

Pradyut Bhattacharya 16 年前

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

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

谢谢。。。