文章/答案/技术大牛

发布

社区首页 >问答首页 >导航栏未以内联方式显示

问导航栏未以内联方式显示
EN

Stack Overflow用户

提问于 2017-02-23 15:58:53

回答 3查看 3.4K关注 0票数 0

我的导航栏没有以内联方式显示。当将代码：.nav li a {...}更改为.nav li{...}时，它在行中，但是所有的css函数都从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>

inline

html

css

navbar

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-02-23 16:01:58

如果我理解正确的话，您可以将以下代码添加到CSS中：

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

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

票数 7

Stack Overflow用户

发布于 2017-02-23 16:03:47

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

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

票数 1

Stack Overflow用户

发布于 2017-02-23 16:40:00

hi friend;

You just make 

.nav li{display:inline-block;}

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42410047

复制

相似问题

问导航栏未以内联方式显示
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问导航栏未以内联方式显示EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问导航栏未以内联方式显示
EN