Html 包裹<；ul>；菜单中的<；hr/>；标签

我有一个使用无序列表的简单菜单。我想将其包装为两个

元素。问题是第二个hr没有出现在

之后，而是出现在第一个hr的旁边：

标题ul{
列表样式类型：无；
保证金：0；
填充：0；
位置：静态；
边缘底部：2px；
}
头李{
显示：内联块；
浮动：左；
右边距：1px；
}

显示菜单

试试这个：

   .header ul {
    list-style-type:none;
    margin:0;
    padding:0;
    position: static;
    margin-bottom:2px;
}

header li {
    display:inline-block;
    float: left;
    margin-right: 1px;
}

ul li
{
  display:inline-block;
  padding-right:10%;
  background-color:gray;
  padding:10px;
}
ul li:hover
{
  background-color:blue;
  color:white;
}

ul li
{display:inline-block;}a
{
  text-decoration:none;
}

---

如果将

内联块

应用于

li

，则不需要使用

浮点：左

，如果使用

浮点：左

，则需要清除后面的下一个元素，在本例中为

标题ul{
列表样式类型：无；
保证金：0；
填充：0；
位置：静态；
边缘底部：2px；
}
头李{
显示：内联块；
/*浮动：左*/
右边距：1px；
}

显示菜单

您同时使用了

显示：内联块和<代码>浮动：左侧li

上的code>，使用

float时不需要：左将使其脱离流，从而减少
显示：内联块的需要

应用<代码>浮动：左到
li
也意味着需要清除
hr
，以确保它显示在
ul
之后

As
显示：内联块
将确保
li
水平显示，您只需删除
float:lefthr
即可从
li
中选择code>


标题ul{
列表样式类型：无；
保证金：0；
填充：0；
位置：静态；
边缘底部：2px；
}
头李{
显示：内联块；
右边距：1px；
}

显示菜单











ul/li是否浮动？如果是，那么应用一种清算技术，正如@FabrizioCalderan所说，。我同意，
clear：两者都应该解决它。我想补充一点，您可以使用边框来保存添加
hr
。这些边框是否重要？如果没有，你可以用一个带边框的包装袋：2件纯色灰色；和边框底部：2倍纯色灰色；参考：