Navbar未显示内联

时间:2017-02-23 07:58:53

标签: html css navbar inline

我的导航栏未显示内嵌。 更改代码:.nav li a {...}.nav li{...}时,它排成一行,但所有css函数都从HTML中的class = 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;


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

3 个答案:

答案 0 :(得分:6)

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

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

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

答案 1 :(得分:1)

我认为您应该将UIApplication.shared.keyWindow?.rootViewController.performSegue... 添加到display: inline-block;

可能重复Why is my bootstrap navbar not displaing inline?

答案 2 :(得分:0)

enter image description here嗨朋友;

You just make 

.nav li{display:inline-block;}

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

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