CSS 不显示部分代码
[英]CSS doesnt show part of code
问题描述
Im learning html & css and after few tutorials I decided to write webpage from nothing.
我正在学习 html 和 css，经过几次教程后，我决定从无到有编写网页。 But I've got a problem.但我有一个问题。 When I add "display: inline" in CSS .nav , it ignores all .当我在 CSS .nav 中添加“display: inline”时，它会忽略所有 . nav css properties, including "display: inline" .导航css 属性，包括"display: inline" 。
Here's code:这是代码：
HTML HTML
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
<title>Neni okurka, nebudou caciky</title>
</head>
<body>
<div class="nav">
<ul>
<li class="active"><a href="#">Navigation 1</a></li>
<li><a href="#">Navigation 2</a></li>
<li><a href="#">Navigation 3</a></li>
<li><a href="#">Navigation 4</a></li>
<li><a href="#">Navigation 5</a></li>
</ul>
</div>
<div class="nav2">
<ul>
<li class="active"><a href="#">Navi 1</a></li>
<li><a href="#">Navi 2</a></li>
<li><a href="#">Navi 3</a></li>
<li><a href="#">Navi 4</a></li>
<li><a href="#">Navi 5</a></li>
</ul>
</div>
</body>
</html>
CSS CSS
body {
background-image: url("background.png");
width: 1000px;
margin-left: auto;
margin-right: auto;
border: 25px solid rgba(0, 0, 0, 0.3);
}
.nav {
display: inline;
width: 500px;
background: #fff;
}
5 个解决方案
解决方案1
1 2015-06-19 20:27:45
The right usage is:正确的用法是：
.nav li {
display: inline;
}
解决方案2
1 已采纳 2015-06-20 04:53:48
If you want background(image) you need to have it in the container as soon you give it width and height because body is the "Base" you can give it margin: 0; padding: 0;如果你想要background(image)你需要在你给它width和height立即将它放在container ，因为body是“Base”，你可以给它margin: 0; padding: 0; margin: 0; padding: 0; to reset it only and you can add background to it but not height and width .仅重置它，您可以为其添加background ，但不能添加height和width 。 Inside container you have created you can play with the height and width as you like.在您创建的container内，您可以随意调整height和width 。
html, body { margin: 0; padding: 0; background-color: cadetblue; } .container { width: 1050px; height: 100vh; margin: 0 auto; position: relative; background-size: 100% 100%; background: url("http://www.myfreetextures.com/wp-content/uploads/2013/07/free-grunge-texture-of-old-vintage-paper-background-image.jpg") no-repeat center; } .nav { width: 1000px; height: 50px; margin: 0 auto; background: beige; border: 25px solid rgba(0, 0, 0, 0.3); } .nav ul { margin: 0; padding: 0; list-style-type: none; } .nav ul li { margin-left: 12px; } .nav ul li a { float: left; font-size: 16px; font-weight: lighter; text-decoration: none; font-family: sans-serif; margin: 10px 0px 10px 0px; padding: 8px 15px 8px 15px; } .nav ul li a:hover { color: #fff; border-radius: 3px; background: cadetblue; }
<div class="container"> <div class="wrapper"> <div class="nav"> <ul> <li class="active"><a href="#">Navigation 1</a> </li> <li><a href="#">Navigation 2</a> </li> <li><a href="#">Navigation 3</a> </li> <li><a href="#">Navigation 4</a> </li> <li><a href="#">Navigation 5</a> </li> </ul> <ul> <li class="active"><a href="#">Navi 1</a> </li> <li><a href="#">Navi 2</a> </li> <li><a href="#">Navi 3</a> </li> <li><a href="#">Navi 4</a> </li> <li><a href="#">Navi 5</a> </li> </ul> </div> </div> </div>
this code without
display:inline;display:inline;ordisplay :inline-block;display :inline-block;which it works but it's another way to align nabbar in nice way compatible with all browsers too.
I hope you like it and it helps you, let me know if you have another question.我希望你喜欢它，它对你有帮助，如果你有其他问题，请告诉我。
解决方案3
0 2015-06-19 20:25:27
你应该把 display: inline-block;
解决方案4
0 2015-06-19 20:25:43
男人试着把 .nav ul lit 用来指代 li 但我不会使用它让我现在告诉你一秒钟
.nav ul li`display:inline`
解决方案5
-1 2015-06-19 20:30:58
为了更好地显示你的导航，你不应该使用 .nav ul li display:inline我知道我说那是为了回答你的问题，但我会告诉你这件事会更好 .nav ul li float:left这会做li 中的项目将向左浮动，并与内联执行相同的操作，但最好使用它而不是内联
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.