Navbar未显示内联

Question

Navbar未显示内联

我的Navbar没有显示内联.当变化的代码:.nav li a {...}向.nav li{...}它是线,但所有的CSS功能从HTML中的类= NAV消失.我试图添加,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;


}

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sht*_*tut 6

如果我理解正确,您可以将其添加到CSS:

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

Run Code Online (Sandbox Code Playgroud)

这里的工作版本 - https://jsfiddle.net/2rovth3a/

归档时间：	9 年，2 月前
查看次数：	1438 次
最近记录：	9 年，2 月前