Html CSS水平菜单使用无序列表弯曲变形

HTML:

结果:

---

为什么此菜单看起来像楼梯？

无论何时创建水平导航菜单，都应向列表项添加内嵌块样式。在css中尝试以下操作：

ul {
    padding-left: 0;
    background-color: #036;
}

ul li a {
    text-decoration: none;
    float: left;
    padding: 0.2em 1em;
    color: white;
    border-right: 1px solid white;
}

---

问题是您没有在li标记上定义浮点或内联块属性，因此它显示为全宽度块。示例中的浮点值仅位于li内部的a标记上，因此如果您将浮点值移出li，您应该会很好。更好的方法是，按照其他注释中的建议使用内联块。

在

a

元素上有

float:left

，因此

li

元素仍然在它们自己的行上

看到楼梯效果的原因是

a

元素比它们所包含的

li

元素高，因此它们将下一个链接的

a

元素向前推。如果使用浏览器的开发人员工具，可以看到

li

的渲染高度小于其子元素的渲染高度，因此每个

a

元素都在其后面的

li

中占据了一些空间

您需要以下CSS：

ul li{
  display:inline-block;
}

为了在实际中看到高度是如何不匹配的，这里有一个演示。边框定义了

li

元素的边界框，背景应用于

a

元素：

ul{
左侧填充：0；
背景色：#036；
}
ulli{
边框：1px实心#000；
}
ullia{
文字装饰：无；
浮动：左；
填料：0.2米1米；
颜色：白色；
右边框：1px纯白；
背景：rgba（255255,0.3）；
}

I虽然float可以实现与您相同的功能，但您必须引入“clear”属性“内联块”只允许您避免使用任何额外的css声明进行清除。请记住，“内联”与IE6-IE7不兼容。更多信息，谢谢。我认为是时候放弃除IE8之外的所有IE版本了，所以我不担心IE8以外的任何版本。虽然IE8也变得过时了。好的，谢谢。根据我所读的浮动需要有宽度。我是否将此应用于

a

或

I

元素？带浮点数的元素不需要定义宽度；他们将测量内容的宽度。

ul li{
  display:inline-block;
}

ul li {
    float: left;
}