flex布局下导航栏搜索框无法右对齐，删除flex后按钮样式异常如何解决

问题根源 #

你的<nav>是flex容器，flex布局下子元素的float属性会直接失效，所以你给搜索框加的float: right完全不会生效，额外加的负margin-right反而会导致元素错位。你删掉display: flex之后float恢复作用所以搜索框能靠右，但导航菜单是依赖flex布局排版的，所以样式会乱。

解决方案 #

不需要删除原有flex属性，只要调整2处CSS即可：

1. 给flex容器nav设置两端对齐，同时让子元素垂直居中，导航按钮和搜索框会自动分别靠左右两侧
2. 删掉搜索框样式里无效的float、负边距属性，调整内边距和导航栏对齐

修改后的完整CSS代码

body * {
  box-sizing: border-box;
}

header,
header nav {
  width: 100%;
}

header nav {
  position: fixed;
  background-color: #fefefe;
  border-bottom: 1px solid #bbb;
  box-shadow: 0 0 1rem 0 rgb(0, 0, 0, .5);
  z-index: 5;
  /* 新增以下两行 */
  justify-content: space-between;
  align-items: center;
  padding-right: 1rem; /* 可选，避免搜索框贴到最右侧 */
}

header nav,
header nav ul,
header nav ul>li {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}

header nav ul {
  list-style-type: none;
}

header nav ul>li {
  position: relative;
}

header nav ul>li:hover ul {
  top: 100%
}

header nav ul li a,
header nav ul li a:visited {
  padding: 1rem 1.5rem;
  font-size: 1.5rem;
  color: #000;
  text-decoration: none;
}

header nav ul li a:hover {
  color: #76323f;
}

header nav ul>li>ul {
  position: absolute;
  top: -400%;
  left: 0;
  flex-direction: column;
  align-items: stretch;
  box-shadow: 0 0.5rem 0.3rem 0 rgb(0, 0, 0, 0.2);
  transition: top .5s ease;
  z-index: -1;
}

header nav ul>li>ul>li>a {
  width: 100%;
  background-color: #fefefe;
  border-bottom: 1px solid #bbb;
  white-space: nowrap;
}

/* 修改后的搜索框样式 */
.search {
  padding: 0.6rem 1rem;
  width: 23%;
  border: none;
  background-color: #eeeeee;
  font-size: 120%;
}

修改后完全保留原来的导航菜单、下拉效果样式，搜索框会自动停靠在导航栏右侧，垂直方向和导航按钮居中对齐。

内容的提问来源于stack exchange，提问作者claudiatjuhhh