Я не могу заставить лиси быть в моей серой навигационной панели? - PullRequest
Новая
       26

Я не могу заставить лиси быть в моей серой навигационной панели?

0 голосов
/ 11 июля 2019

У меня есть две ссылки, которые я хочу видеть справа от панели навигации. Я не уверен, что мне здесь не хватает, но если кто-то может взглянуть на это, я был бы очень признателен. Вот мой rep.it https://gregs -list.leezamartinez.repl.co /

Я пытался поместить их в промежуток и переместить промежуток в верхнюю часть страницы, но, похоже, это не работает. Я прошу прощения, если это глупый вопрос, я не могу понять это.

Я хочу, чтобы ссылки "Почта" и "Аккаунт" находились в правой части панели навигации. https://gregs -list.leezamartinez.repl.co /

1 Ответ

0 голосов
/ 11 июля 2019

Это связано с тем, что ваш h1 имеет 100% ширину , лучший подход здесь состоит в том, чтобы сделать навигационный тег display: flex , justify-content: space-Между и align-items: center для центрирования всего по вертикали.

Пример 

html {
 padding: 10px;
 padding-right: 10px;
 padding-left: 10px;
}

a {
 text-decoration: none;
 display: inline;
}

a::hover {
  text-decoration-line: underline;
}
body {
 box-sizing: border-box;
 font-family: 'Nunito', sans-serif;
}

main {
  padding: 5%;
  margin: auto;
  padding-top:86px;
}

nav {
  position: fixed;
  margin: -18px;
  background-color: whitesmoke;
  width: 100%;
  height: 65px;
  text-align: left;
  display:flex;
  justify-content:space-between;
  align-items:center;
  z-index:9;
}

li {
  float: right;
  color: purple;
  list-style: none;
  font-size: 20px;
  padding: 8px;
  margin-right: 8px;
}

ul {
  display: inline;
  padding: 5px;
}

span {
  color:rgb(184, 179, 179);
  text-decoration-style: none;
}

p {
  color: blue;
  font-weight: bold;
}

placeholder {
  font-famiy: 'Nunito', sans-serif;
  color:lightgrey;
}

#mag {
  height: 31px;
  width: 29.5px;
  display: -webkit-inline-box;
  position: absolute;
  border: 1px solid #DDDDDD;
  border-radius: 3px;
}

h1 {
  font-famiy: 'Nunito', sans-serif;
  font-size: 25px;
  font-weight: 700;
  padding: 10px;
  margin: 5px;
}

input {
  height: 33px;
  font-color: whitesmoke;
  font-size: 20px;
  width: 400px;
  padding: 5px;
  border: 2px solid whitesmoke; 
}

label {
  font-weight: bold;
}

#button1 {
  width: 102px;
  height: 40px;
  padding: 12px 28px;
  border-radius: 4px;
  float: left;
  border: 1px solid rgb(228, 228, 228);
  text-align: center;
  font-size: 14px;
  background-color: ghostwhite;
 
}

#button2 {
  width: 155px;
  height: 40px;
  padding: 12px 28px;
  border-radius: 4px;
  float: left;
  border: 1px solid rgb(228, 228, 228);
  background-color: ghostwhite;
  font-size: 14px;
}

#button3 {
  width: 100px;
  height: 40px;
  padding: 12px 28px;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  background-color: ghostwhite;
  border: 1px solid rgb(228, 228, 228);
}

.container {
  position: absolute;
  padding-top: 10px;
}

form {
  padding: 20px;
  padding-right: 55px;
  padding-left: 0;
}
<nav>
	<h1>Greg's List</h1>
  <ul>
      <li> <a href="#">Account</a></li>
      <li> <a href="#">Post</a></li>
  </ul>
</nav>
<main>
	<div class="box">
		<label>Search jobs</label>
 </div> 
  <form action="#">
     <input id='search' type="search" name="search" placeholder="Search software jobs" /> <a href='#'> <img id='mag' src="https://tf-assets-prod.s3.amazonaws.com/tf-curric/WEB-DEV-001/2.4.6_challenge_design_to_code/magnifying-glass.png" alt="magnifying glass" /></a>
    </form>

     <button type="button" id="button1"> prev</button>
      <button a href="#" type="button"id="button2">1 to 100 of 179</button>
      <button type="button"id="button3"> next > </button>
      <div class="container">
        <p><span>June 22</span><a href="#"> Technical Project Manager <span> Midtwon East</span></a></p>
        <p><span>June 21</span><a href="#"> Frontend Developer <span> SoHo</span></a></p>
        <p><span>June 20</span><a href="#"> Senior Python Developer / Cofounder<span> Flatiron</span></a></p>
      </div>
      </main>

Кроме того, имейте в виду, что в вашем HTML было много ошибок разметки, я исправил их во фрагменте выше. Кроме того, вам потребовались некоторые отступы для основного тега из-за фиксированной панели навигации (для которой также требовался z-index: 9 , чтобы другие элементы не отображались над ним).

...