我试图制作一个自定义导航栏，因为标准的导航栏并不是我真正想要的。它看起来太随意了，所以我试着不用导航栏，图像。
我无法将它们4张图像排成一行
我看到有两种方法，一种是通过CSS定义类，另一种是直接在index.html中。这两种方法有什么不同吗？
帮助会非常复杂。我尝试了30个包含部分代码的网站，但似乎什么都不起作用，我想知道我做错了什么。
问候女王
.navbar {
max-width:960px;
text-align:center;
}
.home {
position:relative;
display: inline-block;
float:left;
padding:10px;
}
.search {
position:relative;
display: inline-block;
pading:10px;
}
.logo {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;
}
.partner {
position:relative;
display: inline-block;
float:right;
margin-right:50%;
padding:10px;<body>
<div class="navbar">
<div class="navbar-special">
<ul class="nav">
<li class="home"><a href="#"><img src="http://i.imgur.com/GryNQfZ.png" /></a></li>
<li class="search"><a href="#"><img src="http://i.imgur.com/NfURGQL.png" /></a></li>
<li class="logo"><a href="#"><img src="http://i.imgur.com/sIwbaop.png" /></a></li>
<li class="partner"><a href="#"><img src="http://i.imgur.com/Ry9hIzC.png" /></a></li>
</div> <!-- div closing navbar -->
</div><!-- div closing navbar -->
</body>http://jsfiddle.net/n32koz7q/1/
当它应用于样式时，有一些注意事项会使在index.html或外部样式表中放置样式变得不同。
将样式放入外部样式表将(其他所有内容保持不变)。。。
--创建一个新的HTTP请求，外部样式表将在index.html页面之后加载(假设该页面请求样式表)。
--更改应用样式的顺序。例如，如果你有。
index.html:
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
hello world!
</body>
</html>
<style>
.body {color:black;}
</style>
和mystyle.css:
body {
color: white;
}
正文将具有color:black的css属性，因为该样式是最后加载的。你可以在这里阅读。
还有一些其他差异，但这些可能是您当前用例特有的差异。
至于你最初的问题：这里有一个更新的小提琴：
http://jsfiddle.net/n32koz7q/2/
你有很多不必要的造型。我会从这里开始，然后积累。基本上，在这种情况下，您将要用来让元素内联的最基本的CSS看起来是这样的：
.navbar {
max-width:960px;
text-align:center;
}
li {
display:inline-block;
padding: 10px;
}
从本质上讲，您只希望这些li元素处于内联状态。
祝你好运！
只需添加以下代码：
.navbar-default {
background-color:red;
}
这应该会让你继续前进。