html - 我无法像我想要的那样定位和居中放置元素

我在将自己的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>

我不是专业的FrontEnd，所以需要很少的帮助来找出问题所在，为什么我的代码看起来不像我的设计

最佳答案

我建议您研究display: flex;，其中有很多很棒的文章。 Wes Bos上有一个免费的视频教程，但是您会发现很多不错的教程。

我刚弄出徽标，然后开始浏览ul。您需要更正元素的css。使得这项工作的是以下CSS

这使得项目连续排列，证明内容将其全部放在中心。

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

右边距将徽标推到最左边

.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>

关于html - 我无法像我想要的那样定位和居中放置元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59117609/