如何对齐 html/css 中的导航项？

Question

我正在尝试对齐我的 menu-content 项目，如所附图片所示。我能够对齐 nav-menu 内容。但不是 insta-logo 和 hr。你能告诉我如何正确编码并解释一下吗？

body
{
  background-color: black;
}

.header
{
  margin: 50px 122px 0px 122px;
}
.logo
{
  color: white;
  float: left;
}

.nav-menu
{
  margin: 0px;
  float: right;
}

.nav-menu li
{
  padding-left: 82px;
  display: inline;
}

.nav-menu a
{
  text-decoration: none;
  font-family: Roboto;
  font-size: 18px;
  color: #808080;
}


.nav-menu hr
{
  transform: rotate(90deg);
  border: 0.1px solid #FFFFFF;
  float: right;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css">
    <title>Website</title>
  </head>
  <body>

    <div class="header">
      <div class="logo">
        <h1>Logo</h1>
      </div>

      <div class="menu-content">
        <div class="nav-menu">
          <ul>
            <li><a title="click to see my work" href="index.html">Work</a></li>
            <li><a title="about me and contact info" href="about-contact.html">About+Contact</a></li>
          </ul>

          <hr style="width:100px;">   <!--nav and insta separate line-->

        <div class="insta-logo">
            <img title="My Insta account"src="images/insta-logo-svg.svg" alt="Insta profile link">
        </div>
       </div>
      </div>
    </div>

    <hr>

  </body>
</html>

See my attached image for reference

Answer 1

删除 class="header" 元素的左右边距，或使其变小。
将以下 css 属性添加到具有 class="header" 的元素：

    display: flex;
    justify-content: space-between;

CSS 弹性规则是组织网页布局的好方法。在这种情况下，元素将相互远离，它们将占据 header.

的整个宽度

Answer 2

解释请阅读CSS评论：

/* CSS Reset for total control over all padding / margins */

* {
  padding: 0;
  margin: 0;
  display: border-box;
  
}

body {
  height: 100vh;
  background-color: black;
  font-family: arial;
}


/* Create navbar container */

.navbar {
  height: 60px;
  width: 100%;
  display: flex; /* flex (or Flexbox) divs automatically inner elements into a row */
  justify-content: space-around; /* Justify content lets you determine how the inner items behave on an x axis in a Flexbox */
  align-items: center; /* Align items lets you determine the alignment of inner elements on a Y axis in a flexbox. In this case, you're centering the items in the middle. */
  background-color: black;
  color: white;
  border-bottom: 1px solid grey;
}

.navbar-logo {
  font-size: 30px;
}

.navbar-menu { /* Create a container for the navbar-menu items (excludes things you don't want users to click on_. In this case, this should include your links, divider, and logo */
  display: flex; 
  align-items: center;
}

.navbar-menu ul { /* Align items horizontally again for the link list */
  display: flex;
  justify-content: center;
  list-style: none;
}

.navbar-menu a { /* Basic link styling */
  display: inline-block;
  margin: 0 10px;
  text-decoration: none;
  color: white;
  transition: all .2s ease;
}

.navbar-menu a:hover {
  color: #21abde;
}

/* Line for the divider */
.navbar-menu-divider {
  height: 60px;
  background-color: grey;
  width: .5px;
}

/* Example block for instagram logo. You'll have to either use the CDN from fontawesome.com or downlaod an image of the logo to have the real one */
.ig-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  margin: 10px;
  background-color: grey;
  cursor: pointer;
  transition: .2s ease;
}

.ig-logo:hover {
 color: white;
 background: #21abde;
}

<body>
<nav class="navbar">
  <div class="navbar-logo">Logo</div>
  <div class="navbar-menu">
    <ul>
      <li><a href="">Work</a></li>
      <li><a href="">About+Contact</a></li>
    </ul>
    <div class="navbar-menu-divider"></div>
    <div class="ig-logo">IG</div>
  </div>
</nav>
<body>

欢迎来到社区。

如何对齐 html/css 中的导航项？

How to a align nav items in html/css?

html

css

menu

header

nav