Navbarがインラインで表示されない

Navbarがインラインで表示されません。変更コード：.nav li a {...}から.nav li{...}までは行内ですが、HTMLのclass = navからすべてのcss関数が消えます。 ul.nav{display: inline-block;}を追加しようとしましたが、何もしません。Navbarがインラインで表示されない

私は私が正しく理解している場合、あなただけのCSSにこれを追加することができます

html, body { 
 
margin: 0; 
 
    padding: 0; 
 
} 
 

 
.container { 
 
    max-width: 940px; 
 
    margin: 0 auto; 
 
    padding: 5px; 
 
} 
 

 
.header { 
 
    background-color: #333; 
 
} 
 

 
.nav { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 20px 0; 
 
    letter-spacing: 1.6px; 
 
} 
 

 
.nav li a { 
 
    display: inline; 
 
    text-decoration: none; 
 
    transition: 0.4s; 
 
    color: #fff; 
 
    font-family: 'Raleway', sans-serif; 
 
    font-weight: 600; 
 
    font-size: 12px; 
 
    margin-right: 25px; 
 
    text-transform: uppercase; 
 
} 
 

 
.nav li a:hover { 
 
    background-color: #ffffff; 
 
    color: #333; 
 
    font-weight: 900; 
 
    padding: 24px 10px; 
 
    font-size: 12px; 
 
    cursor: pointer; 
 

 

 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <link href="https://fonts.googleapis.com/css?family=Raleway:400, 600" rel="stylesheet"> 
 
    <link href="stylesheet.css" type="text/css" rel="stylesheet"> 
 
    <script type='text/javascript' src='script.js'></script> 
 
    <script src="jquery-3.1.1.min.js"></script> 
 
    <title>Smart-Home</title> 
 
    </head> 
 
<body> 
 

 
    <div class="header"> 
 
    <div class="container"> 
 
     <ul class="nav"> 
 
     <li><a href ="indexKontakt.html"> O firmie </a></li> 
 
     <li><a href ="indexKontakt.html"> Produkty </a></li> 
 
     <li><a href ="indexKontakt.html"> Nasi partnerzy </a></li> 
 
     <li><a href ="indexKontakt.html"> Kontakt </a></li> 
 
     </ul> 
 
    </div> 
 
    </div>

出典

2017-02-23 stackmack

...私は昨日からそれを理解しようとしていた、私はそれをうまく説明願っています：

.nav li{ 
    display: inline; //or inline-block 
}

作業バージョンhere- https://jsfiddle.net/2rovth3a/

出典

2017-02-23 08:01:57 Shtut

または '表示：インラインブロック;'すぎ、と私はあなたが*理解しunderstoor修正する必要があると思います*;） –

@Hidaytラーマン、固定感謝:) – Shtut

洙ありがとうございました！できます！ 'display：inline-block;'を '.nav li a {}'や '.nav {}'に追加すると、なぜうまくいかないのだろうか？ – stackmack

私はあなたがWhy is my bootstrap navbar not displaing inline?

出典

2017-02-23 08:03:47

@Shtutと同じ回答 –

と同じで、これは重複していません。なぜなら、OPにはブートストラップはどこにも書いていないからです。 –

：D ... ok sir ...この質問を読んでいる間に回答があったかもしれません...あなたのような気がする;） –

こんにちは友人のあなたのli

可能な重複にdisplay: inline-block;を追加すべきだと思います。

You just make 

.nav li{display:inline-block;} 

and remove .nav li a {display: inline;} 

see attachment file....[![enter image description here][1]][1]

出典

2017-02-23 08:40:00

Navbarがインラインで表示されない

答えて

関連する問題