带有CSS的水平列表中的乱码项目答案

【问题标题】：garbled items in a horizontal list with css带有CSS的水平列表中的乱码项目
【发布时间】：2010-03-28 22:39:04
【问题描述】：

我制作了一个页面，我在其中使用列表来水平显示项目

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

但是当我拖动并缩短浏览器窗口时，我得到一个乱码列表就像这里的屏幕截图一样

我在列表中使用 css 作为： -

#navlist li
        {

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

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

#clear-both 
{
   clear: both;
}

任何帮助

谢谢

普拉迪特

【问题讨论】：

【解决方案1】：

我似乎无法访问您的网站。

尝试使用 display:inline 代替 float:left

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

【讨论】：

【解决方案2】：

问题在于每个 LI 元素的高度不同。如果你给它们一个共同的高度，当窗口调整大小时布局会正确流动：

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

【讨论】：

【解决方案3】：

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

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

谢谢...

【讨论】：