我不能像我想要的那样定位和居中元素

Question

---

我在将自己的 UI 放入前端时遇到问题我已经开始放置导航，但事情真的很糟糕。
这是我在我的用户界面中创建的。

---

---

我带来的是这个。

---

 * { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 18px; } ul { text-align: center; list-style-type: none; } /* container */ .container { width: 90%; margin: auto; } .clear { clear: both; } .nav-items li { display: inline; padding: 10px; } .nav-items li h1 { display: inline; } .left-item { background-color: yellow; border-radius: 30px; } .left-item a { color: white; padding: 13px 0 12px 0; text-decoration: none; } nav { padding: 33px 0; } .blueBg { background-color: blue; color: #fff; overflow: hidden; }

 this my Html <header class="blueBg"> <div class="container"> <!-- navgation bar --> <nav> <!-- Nav items --> <ul class="nav-items"> <li> <h1 class="logo">Logo</h1> </li> <li>home</li> <li>blog</li> <li>products</li> <li>clients</li> <li>contact us</li> <li class="left-item"><a href="">get started</a></li> </ul> </nav> </div> </header>

我不是专业的前端，所以几乎不需要帮助来找出为什么我的代码看起来不像我的设计的问题

Answer 1

我建议你看看display: flex; ，有几篇关于它的好文章。 Wes Bos 有一个关于它的免费视频教程，但你会发现大量好的教程。

我刚刚打破了标志并开始了导航ul。 您需要更正元素的 css。 使这项工作起作用的是以下css

这使得项目成一排， justify-content 将它们全部放在中心。

.navigation {
  display: flex;
  align-items: center;
  justify-content: center;
}

margin-right 将标志推到最左边

.logo {
  margin-right: auto;
}

左边距推动开始到最右边

.get-started {
  margin-left: auto;
}

 * { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 18px; } ul { text-align: center; list-style-type: none; } /* container */ .navigation { display: flex; align-items: center; justify-content: center; } .container { width: 90%; margin: auto; } .logo { font-size: 1.2rem; color: white; margin-right: auto; } .nav-items { display: flex; align-items: center; } .nav-items li { padding: 10px; } .nav-items li h1 { display: block; } .get-started { margin-left: auto; padding: 10px 13px; background-color: yellow; color: black; border-radius: 30px; } nav { padding: 33px 0; } .blueBg { background-color: blue; color: #fff; overflow: hidden; }

 <header class="blueBg"> <div class="container"> <!-- navgation bar --> <nav class="navigation"> <!-- Nav items --> <a href="/" class="logo"> Logo </a> <ul class="nav-items"> <li>home</li> <li>blog</li> <li>products</li> <li>clients</li> <li>contact us</li> </ul> <a href="" class="get-started">get started</a> </nav> </div> </header>

Answer 2

首先，您需要将 html body 分成行和列。 例如，您的顶部导航栏将位于第一行，而此文本和搜索字段以及按钮应位于第二行。

正如我所看到的，您想在顶部导航栏中分隔内容，因此您必须根据需要将第一行分成几列。 在您的情况下，这是 3 列。 您可以为每一列配置参数，例如大小、位置、颜色等。

或者，如果您想对代码进行最少的更改，请尝试以下操作：

<nav>
  <div class="container">
    <a style="margin-left: 30px; text-align: left">
      <img src="path to logo" width="30" height="30">
    </a>
    <ul style="text-align: center;">
      <li>home</li>
      <li>blog</li>
      <li>products</li>
      <li>clients</li>
      <li>contact us</li>
    </ul>
    <a href="" class="get-started" style="text-align: right;">
      Get Started
    </a>
  <div>
</nav>