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導航欄不是水平的

回答

相關問題