Navbar가 인라인으로 표시되지 않습니다.

내 Navbar가 인라인으로 표시되지 않습니다. 코드를 변경하면 .nav li a {...}에서 .nav li{...}으로 바뀌지 만 모든 CSS 기능은 HTML의 class = nav에서 사라집니다. 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 
}

작업 버전 여기 - https://jsfiddle.net/2rovth3a/

출처

2017-02-23 08:01:57 Shtut

또는'디스플레이 : 인라인 블록,'너무, 나는 당신이 * * 이해하기 understoor 수정해야 추측) –

@Hidayt 라만 – Shtut

은 김 감사합니다 감사합니다 :) fixed되어! 그것은 작동합니다! '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가 인라인으로 표시되지 않습니다.

답변

관련 문제