CSS导航栏不是水平的

我试图制作一个导航栏水平但在垂直的时刻。任何帮助都会很棒。问题在于它的垂直。我在html中创建了列表，然后在css中使用我的其他文件进行编辑。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; 
}

来源

2013-02-28 TheEagle

我用你的代码创建了一个jsFiddle（http://jsfiddle.net/jdwire/dKQxu/），它显示水平。我没有看到问题。（我在Mac上使用Google Chrome 25）。 – 2013-02-28 18:07:59

对我来说似乎很好。 – 2013-02-28 18:10:04

伙计们对不起，这是我的包装类，我已经解决了这个问题，它出于某种原因阻止了它。谢谢您的帮助！ – TheEagle 2013-02-28 18:19:01

就个人而言，我总是设置我的水平导航条像这样的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将让它坐在水平，并宣布其宽度/ height将为a创建适当的容器。 a然后继承li容器的高度/宽度。缺少float:left也消除了清除任何内容的需要。

编辑：更新以显示IE7及以下版本的解决方法不尊重行内块;

来源

2013-02-28 18:09:25 PlantTheIdea

请注意，此解决方案在IE7及以下版本中不起作用。 – 2013-02-28 18:11:48

它有一个小诀窍：http://stackoverflow.com/questions/3754469/how-to-fix-displayinline-block-on-ie6 – PlantTheIdea 2013-02-28 18:12:50

尝试：

div.horizontal一个 { 显示：块; width：86px; float：left; }

来源

2013-02-28 18:10:08 Lee

使用

display:inline-block;

不能使用卧式目前的方法，如块流垂直定位自己。但是这个属性覆盖了流程，并使它看起来像一个内联/块混合。

来源

2013-10-11 08:16:09

CSS导航栏不是水平的

回答

相关问题