Question

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

我尝试将它们放在跨度中并将其移到页面顶部，但这似乎不起作用。如果这是一个愚蠢的问题，我感到抱歉，我似乎无法解决。

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

Answer 1

这是由于您的 h1 具有 100％宽度的事实，此处最好的方法是使导航标签 display：flex ，调整内容：和 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 ，以防止其他内容显示在其上方）。

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

1 个答案: