Question

我试图让导航栏水平但目前是垂直的。任何帮助都会很棒。问题是它的垂直。我在html中创建了列表，然后在css中使用了我的其他文件进行编辑。

HTML：

<html>
<head>
    <link rel="stylesheet" href="Style/style.css" type="text/css"/>
</head>
<body>
<div class="horizontal">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Articles</a></li>
</ul>
</div>

</body>
<html>

CSS：

div.horizontal
{
width:100%;
height:63px;
}
div.horizontal ul
{
list-style-type:none;
margin:0;
padding:0;
}
div.horizontal li
{
float:left;
}
div.horizontal a
{
display:block;
width:86px;
}
div.horizontal a:link,div.horizontal a:visited
{
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
div.horizontal a:hover,div.horizontal a:active
{
background-color:#7A991A;
}

Answer 1

就个人而言，我总是使用CSS设置我的水平导航栏（使用当前的CSS作为起点）：

div.horizontal li {
    width:86px;
    height:inherit;
    display:inline-block;

    /* Fix bug in IE7 and below */
    zoom:1;
    *display:inline;
}

div.horizontal li a {
    display:block;
    width:100%;
    height:100%;
}

inline-block上的li会让它水平放置，声明其宽度/高度会为a创建合适的容器。 a然后从li容器继承高度/宽度。缺少float:left也消除了清除任何内容的需要。

编辑：更新以显示IE7及以下的解决方法，不遵守内联块;

Answer 2

使用

display:inline-block;

您不能将当前方法用于Horizontal，As块在流中垂直定位。但是这个属性会覆盖流程并使其将自己视为内联/块混合。

Answer 3

使用

display:inline-block;

您不能将当前方法用于Horizontal，As块在流中垂直定位。但是这个属性会覆盖流程并使其将自己视为内联/块混合。

CSS导航栏不是水平的

3 个答案: