Question

我试图在标题的右侧排列导航，我希望它与我的名字（Jae Hong）对齐。这是我的HTML

＆＃13;

<div class="banner">
  <h1> Jae Hong</h1>
  <nav>
    <ul>
      <li><a href="#website" class="active"><b><u>Home</b></u></a></li>
      <li><a href="#resume">Resume</a></li>
      <li><a href="#work">Work</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</div>

＆＃13;

{{1}}

＆＃13;

不确定为什么导航位于横幅框的最底部

Answer 1

如何将position: absolute;添加到h1

＆＃13;

.banner {
  border: 1px solid rgba(0, 0, 0, 0.3);
  background-color: #fff;
  height: 90px;
}

.banner h1 {
  border: 1px solid rgba(0, 0, 0, 0.3);
  width: 170px;
  font-size: 30px;
  margin-left: 100px;
  letter-spacing: 0.2em;
  color: #000;
  position: absolute;
}

nav ul {
  display: block;
  text-align: right;
  list-style-type: none;
}

＆＃13;

<div class="banner">
  <h1> Jae Hong</h1>
  <nav>
    <ul>
      <li>
          <a href="#website" class="active">
          <!-- here was something wrong -->
          <!-- with opening/closing tags -->
              <b>
                  <u>Home</u>
              </b>
          </a>
      </li>
      <li><a href="#resume">Resume</a></li>
      <li><a href="#work">Work</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</div>

＆＃13;

Answer 2

这种情况正在发生，因为默认情况下h1和ul元素都是block元素，因此它将占用其父容器宽度的100％。这就是为什么你在另一条线上看到你的导航。

一种选择是将ul更改为display: inline，然后添加float: right将其推送到容器的末尾。然后，您可以将float: left添加到h1元素以将其推向左侧。

.banner {
  border: 1px solid rgba(0, 0, 0, 0.3);
  background-color: #fff;
  height: 90px;
}

.banner h1 {
  border: 1px solid rgba(0, 0, 0, 0.3);
  width: 170px;
  font-size: 30px;
  margin-left: 100px;
  letter-spacing: 0.2em;
  color: #000;
  float: left;
}

nav ul {
  text-align: right;
  list-style-type: none;
  display: inline;
  float: right;
}

<div class="banner">
  <h1> Jae Hong</h1>
  <nav>
    <ul>
      <li><a href="#website" class="active"><b><u>Home</b></u></a></li>
      <li><a href="#resume">Resume</a></li>
      <li><a href="#work">Work</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</div>

这只是一个例子。另一种选择是使用display: flex作为标题，然后相应地对齐您的内容。

Answer 3

＆＃13;

  .banner {
  border: 1px solid rgba(0, 0, 0, 0.3);
  background-color: #fff;
  height: 90px;
   display: inline-block;
}

.banner h1 {
  border: 1px solid rgba(0, 0, 0, 0.3);
  width: 170px;
  font-size: 30px;
  margin-left: 100px;
  letter-spacing: 0.2em;
  color: #000;
 
}

  nav{

 display: inline-block;
 }

  nav ul li {
  display: inline;
  text-align: right;
  list-style-type: none;

＆＃13;

<div class="banner">
 <h1> Jae Hong</h1>
</div>

  <nav>
    <ul>
      <li><a href="#website" class="active"><b><u>Home</b></u></a></li>
      <li><a href="#resume">Resume</a></li>
      <li><a href="#work">Work</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>

＆＃13;

检查此代码。你的横幅广告div中有导航。 h1标签和nav标签也是块元素。如果您需要更清楚的解释，请告诉我。

和FYI检查bootstrap。它很容易学习，并且一旦你习惯它就会节省大量的时间。 W3schools有初学者教程。我建议你跟w3schools一起学习并继续阅读文档。

Answer 4

您可以使用flexbox实现此目的。请参阅下面的代码（阅读代码中的注释）。您还可以阅读有关“Flexbox”的更多信息。

.banner {
  border: 1px solid rgba(0, 0, 0, 0.3);
  background-color: #fff;
  height: 90px;
  display: flex;;/**Added**/
  align-items: center;;/**Added**/
  flex-wrap: wrap;/**Added**/
}

.banner h1 {
  border: 1px solid rgba(0, 0, 0, 0.3);
  width: 170px;
  font-size: 30px;
  margin-left: 100px;
  letter-spacing: 0.2em;
  color: #000;
}
/**Added**/
nav {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
}

nav ul {
  display: block;
  text-align: right;/**You can remove if you like**/
  list-style-type: none;
  }

<div class="banner">
  <h1> Jae Hong</h1>
  <nav>
    <ul>
      <li><a href="#website" class="active"><b><u>Home</b></u></a></li>
      <li><a href="#resume">Resume</a></li>
      <li><a href="#work">Work</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</div>

导航栏不会移动

4 个答案: