我的导航栏未内联显示。当更改代码时:.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>
如果我正确理解,则可以将其添加到CSS中:
.nav li{
display: inline; //or inline-block
}
这里的工作版本-https : //jsfiddle.net/2rovth3a/
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句