导航栏不显示内联

Question

我的导航栏没有内联显示。当更改代码时：.nav li a {...} 到 .nav li{...} 它是在线的，但是所有 css 功能从 class=nav 中消失 HTML。我尝试添加 ul.nav{display: inline-block;} 但它什么也没做。

我希望我解释得很好，我从昨天开始就想弄明白...

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>

Answer 1

如果我没理解错的话，你可以把这个加到CSS:

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

此处为工作版本- https://jsfiddle.net/2rovth3a/

Answer 2

我认为你应该将 display: inline-block; 添加到你的 li

可能重复

Answer 3

嗨，朋友；

You just make 

.nav li{display:inline-block;}

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

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

导航栏不显示内联

Navbar is not displaying inline

html

css

inline

navbar