我无法让 li 出现在我的灰色导航栏中？

Question

我有两个链接希望位于导航栏的右侧。我不确定我在这里缺少什么，但如果有人可以看看这个，我将不胜感激。这是我的代表https://gregs-list.leezamartinez.repl.co/

我试图将它们放在一个跨度中并将跨度移动到页面顶部，但它似乎不起作用。如果这是一个我似乎无法弄清楚的愚蠢问题，我深表歉意。

我希望帖子和帐户链接位于导航栏的右侧 https://gregs-list.leezamartinez.repl.co/

Answer 1

这是因为您的 h1 具有 100% 宽度，这里最好的方法是使导航标签 display:flex、justify-content:space-between 和 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 中有很多标记错误，我已在上面的 sn-p 中更正了它们。另外，由于导航栏固定（还需要 z-index:9 以防止其他内容显示在其上方），因此您需要对主标签进行一些填充。