html - 导航元素位置

Question

我正在尝试用一些 <ul> 做一个导航栏和 <li>但此时我可以按照我想要的顺序放置元素，我正在学习如何放置元素，我是这个 css 的新手:/我希望你们能帮助我。

#navbar {
	width:100%;
	height: 75px;
	top : 20px;
	position: absolute;
	z-index: 999;
	background-color: #fff;
	opacity: 0.8;	
}

.logo img {
	height: 75px;
}

.navigation{
	width: 100%;
	height: 75px;
	top :10px;
	position: absolute;
	z-index: 999;
}

ul {
 list-style-type: none;
 text-decoration: none;
}
li {
	display: inline-block;
	margin-left :200px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="navbar">
	<div class="logo">
		<img src="img/logo.png">
	</div>
	<div class="navigation">
	<ul>
  		<li><a class="active" href="#home">Home</a></li>
		<li><a href="#services">Services</a></li>
		<li><a href="#aboutus">About Us</a></li>
		<li><a href="#contacts">Contacts</a></li>
		<li><a href="#partners">Partners</a></li>
	</ul>
	</div>
</div>

到目前为止我有这个，但我想要这样的东西 What I want to look like

问题是当我尝试设置 li a { 的样式时它不允许我只从元素中赚取利润，除了他从所有事情中获得利润:/

Answer 1

body {
	margin: 0;
	background: #222;
	font-family: 'Work Sans', sans-serif;
	font-weight: 400;
}

.container {
	width: 50%;
	margin: 0 auto;
}

header {
  background: #fff;
  opacity: 0.8;
  position: fixed !important;
  top : 20px;
  width: 100%;
  z-index: 999;

}

header::after {
  content: '';
  display: table;
  clear: both;
}

.logo {
  float: left;
  margin-left: 10%;
  padding: 10px 0;
}

.logo img{
	height: 60px;
}

nav {
  float: right;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 60px;
  padding-top: 30px;

  position: relative;
}

nav a {
  color: #444;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

nav a:hover {
  color: #000;
}

nav a::before {
  content: '';
  display: block;
  height: 5px;
  background-color: #444;

  position: absolute;
  top: 0;
  width: 0%;

  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
}

<header>
      <div class="logo">
      <img src="img/logo.png">
      </div>

    <div class="container">
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#aboutus">About Us</a></li>
          <li><a href="#contacts">Contacts</a></li>
          <li><a href="#partners">Partners</a></li>
        </ul>
      </nav>
    </div>
  </header>