導航欄由鏈接製成，不是水平的

所以我今天花了代碼搞亂了，嘗試了不同的風格和內容。現在我試圖改變它，使鏈接的導航欄變成水平，但不管我嘗試的鏈接是垂直*。不能爲我的生活找出什麼是錯的。導航欄由鏈接製成，不是水平的

我想要實現的是將鏈接放在首頁，食物，動物和動詞的位置，並使字母鏈接穿過頁面旁邊的「家」字樣。

CSS

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    background: ghostwhite; 
 
} 
 

 
header { 
 
    padding: 0px 0px 0px 0px; 
 
    margin-left: 55px; 
 
    margin-top: 10px; 
 
} 
 

 
h1 { 
 
    color: rosybrown; 
 
    margin: 0px; 
 
    padding: 5px; 
 
    font-family: 'Indie Flower', cursive; 
 
    font-size: 55px; 
 
} 
 

 

 
nav.navbar ul { 
 
    list-style-type: none; 
 
    margin-left: 60px; 
 
    padding: 0px; 
 
    border: 0px solid honeydew; 
 
    width: 120px; 
 
    border-radius: 5px; 
 
} 
 

 
a { 
 
    font-family: 'Indie Flower', cursive; 
 
    display: block; 
 
    width: 80px; 
 
    background: ghostwhite; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    font-size: 25px; 
 
    color: cadetblue; 
 
    padding: 20px; 
 
    margin: 0px; 
 
} 
 

 
li.active a { 
 
    color: black; 
 
    background: ghostwhite; 
 
    border: 1px solid cadetblue; 
 
    border-radius: 5px; 
 
} 
 

 
a:hover { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 

 
nav.navbar { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
} 
 

 
nav.alphabet { 
 
    display: inline-block; 
 
} 
 

 
nav.alphabet ul { 
 
    list-style-type: none; 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
nav.alphabet li { 
 
    display: inline; 
 
} 
 

 
nav.alphabet a { 
 
    font-size: 15px; 
 
    display: block; 
 
    width: 60px; 
 
    padding: 0px; 
 
} 
 

 
**HTML**

<!doctype html> 
 
<html> 
 
    <head> 
 
    <title>Homepage</title> 
 
    <link href="main.css" rel="stylesheet"/> 
 
    <link href='https://fonts.googleapis.com/css?family=Architects+Daughter|Indie+Flower' rel='stylesheet' type='text/css'> 
 
    </head> 
 

 
    <body> 
 
    <header> 
 
     <h1>Italian Glossary</h1> 
 
    </header> 
 

 
    <nav class="navbar"> 
 
     <ul> 
 
     <li><a href="italianhomepage.html">Home</a></li> 
 
     <li class="active"><a href="italianfood.html">Food</a></li> 
 
     <li><a href="#">Animals</a></li> 
 
     <li><a href="#">Verbs</a></li> 
 
     </ul> 
 
    </nav> 
 

 
    <nav class="alphabet"> 
 
     <ul> 
 
     <li><a href="#">A</a></li> 
 
     <li><a href="#">B</a></li> 
 
     <li><a href="#">C</a></li> 
 
     <li><a href="#">D</a></li> 
 
     <li><a href="#">E</a></li> 
 
     <li><a href="#">F</a></li> 
 
     <li><a href="#">G</a></li> 
 
     <li><a href="#">H</a></li> 
 
     <li><a href="#">I</a></li> 
 
     <li><a href="#">J</a></li> 
 
     <li><a href="#">K</a></li> 
 
     <li><a href="#">L</a></li> 
 
     <li><a href="#">M</a></li> 
 
     <li><a href="#">N</a></li> 
 
     <li><a href="#">O</a></li> 
 
     <li><a href="#">P</a></li> 
 
     <li><a href="#">Q</a></li> 
 
     <li><a href="#">R</a></li> 
 
     <li><a href="#">S</a></li> 
 
     <li><a href="#">T</a></li> 
 
     <li><a href="#">U</a></li> 
 
     <li><a href="#">V</a></li> 
 
     <li><a href="#">W</a></li> 
 
     <li><a href="#">X</a></li> 
 
     <li><a href="#">Y</a></li> 
 
     <li><a href="#">Z</a></li> 
 
     </ul> 
 
    </nav> 
 

 
    </body> 
 

 
</html>

來源

2015-09-19 zavly

你試圖讓他們的水平，但不管你做什麼，他們的水平？（我認爲這可能是一個錯字，但仍然是：P）請明確說明你想要做什麼，你嘗試了什麼等等，因爲這與我們幫助你有關。 – David

試着將你的'nav.alphabet li {display：inline;}'樣式改成'nav.alphabet li {display：inline-block;}' –

@TusharKhatiwada這確實使它垂直，但現在我不能使它們與它說「家」 – zavly

，你可以編輯你的風格到SE：

nav.navbar { 
    display: inline-block; 
    vertical-align: top; 
    width: 20%; 
    float: left; 
}

和

nav.alphabet { 
    display: inline-block; 
    width: 80%; 
    float: right; 
}

來源

2015-09-19 05:02:22

您需要使用display：如果要對齊並排兩個導航的側內嵌
http://jsfiddle.net/xme6xnL4/

ul > li { 
    display: inline; 
}

來源

2015-09-19 04:54:37

導航欄由鏈接製成，不是水平的

回答

相關問題