导航元素位置

Question

我正在尝试使用<ul>和<li>进行导航栏，但此时我可以按照我想要的顺序定位元素，我正在学习如何定位元素而我是新的在这个css：/我希望你们可以帮助我。

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

到目前为止，我有这个，但我想要这样的东西 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>

Answer 2

这是您的解决方案。我只改变了最后两个CSS规则，其他一切就像你的代码一样。

＆＃13;

＆＃13;

$Date = Get-Date -Format 'yyyy-MM-dd-hh-mm-ss'    
$limitas = Read-Host -Prompt "Set the limit" # this variable sets the limit    
$procesai = Get-Process

while ($true) {    
    $Date = Get-Date -Format 'yyyy-MM-dd-hh-mm-ss'
    $procai = Get-Process

    Get-Process | Where-Object { $_.WS -ge $limitas }  #| Out-File $outas # does not work when when I need to sort get-procceses with WS

    $outas = "C:\Users\Domantas\Desktop\powershell\atsiskaitymas\2uzduotis\outas" + $Date + ".txt"

    $kontroleris = Get-ChildItem "C:\Users\Domantas\Desktop\powershell\atsiskaitymas\2uzduotis" |
        Measure-Object |
        ForEach-Object { $_.Count }

    if ($kontroleris -eq 6) {
        Get-ChildItem "C:\Users\Domantas\Desktop\powershell\atsiskaitymas\2uzduotis" |
            Sort-Object CreationTime |
            Select-Object -First 1 |
            Remove-Item

        Write-Host "Limitas pasiektas"
    } else {
        Write-Host "Limitas nepasiektas"    
    }

    Start-Sleep -Seconds 1
    $i++
}

＆＃13;

#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: 50px;
}
li:first-child {
  margin-left: 100px;
}
ul li a {
width: 100%;
}

＆＃13;

＆＃13;

＆＃13;