html - 将搜索栏对齐到 flex-container 的右侧

Question

场景:

• 尝试使用 flexbox 创建导航栏，
• 我希望搜索栏位于右侧，
  但是justify-self 行不通？？

我是新手，这太令人沮丧了 为了得不到应该如此简单的东西，请有人告诉我 我哪里错了!

/* Navigation Bar */

nav {
	display: flex;
	background: var(--navbar);
	width: 100%;
	position: fixed;
	padding: 10px 0;
}

.nav-list > li {
	display: inline;
	padding: 0px 25px;
}

.nav-list > li > a {
	text-decoration: none;
	color: var(--navlink)
}

.nav-list > li > a:hover {
	color: var(--navhover)
}

.search-bar {
	display: flex;
	justify-content: flex-end;
	margin: 12px;
	padding: 8px;
	width: 200px;
	font-size: 14px;
	border-radius: 10px;
	border: none;

<nav>
  <ul class="nav-list">
	  <li><a href="#" class="nav-link">Log In</a></li>
		<li><a href="#" class="nav-links">Sign Up</a></li>
		<li><a href="#" class="nav-links">Openings</a></li>
  </ul>
	<form action="/search" method="get">
    <input type="search" name="search" placeholder="Search" class="search-bar">
	</form>
</nav>

Answer 1

在 CSS 中，将 justify-content: space-between; 规则添加到 nav 元素。

nav {
	display: flex;
	background: var(--navbar);
	width: 100%;
	position: fixed;
	padding: 10px 0;
        justify-content: space-between;
}

.nav-list > li {
	display: inline;
	padding: 0px 25px;
}

.nav-list > li > a {
	text-decoration: none;
	color: var(--navlink)
}

.nav-list > li > a:hover {
	color: var(--navhover)
}

.search-bar {
	display: flex;
	justify-content: flex-end;
	margin: 12px;
	padding: 8px;
	width: 200px;
	font-size: 14px;
	border-radius: 10px;
	border: none;
  }

<nav>
  <ul class="nav-list">
    <li><a href="#" class="nav-link">Log In</a></li>
    <li><a href="#" class="nav-links">Sign Up</a></li>
    <li><a href="#" class="nav-links">Openings</a></li>
  </ul>
  <form action="/search" method="get">
    <input type="search" name="search" placeholder="Search" class="search-bar">
  </form>
</nav>