如何将用户组件与搜索栏设置为右对齐且垂直居中？

Hey, let's get your search bar and user menu aligned properly—right-aligned in the navbar and perfectly vertically centered. Looking at your code, the main issue is mixing old float-based alignment with flexbox, plus some missing vertical centering setup. Here's a cleaned-up solution that uses flexbox consistently to get the result you want:

Revised HTML #

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav id="top-menu" class="navbar bg-primary-gradient col-lg-12 col-12 p-0 fixed-top navbar-inverse">
  <div class="navbar-menu-wrapper">
    <button id="menuToggler" class="navbar-toggler navbar-toggler hidden-md-down mr-3" type="button" data-toggle="minimize">
      <span id="navbar-icon" class="fa fa-arrow-left"></span>
    </button>
    <ul class="navbar-nav ml-lg-auto d-flex align-items-center flex-row">
    </ul>
    <!-- Right-aligned container for search + user menu -->
    <div class="navbar-right align-items-center" style="display: flex; height: 100%; padding-right: 15px;">
      <div class="search">
        <input type="text" class="form-control input-sm" maxlength="64" placeholder="Search"/>
        <button type="submit" class="btn btn-primary btn-sm"><span class="fa fa-search">Search</span></button>
      </div>
      <div class="dropdown user-menu">
        <a class="dropdown-toggle topbar-user" id="navbar-user" data-toggle="dropdown">
          <span>USER</span>
        </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbar-user">
          <a class="dropdown-item" href="#"><span class="fa fa-user"></span> Profile</a>
          <a class="dropdown-item" href="settings"><span class="fa fa-cog"></span> Settings</a>
          <a class="dropdown-item" href="#"><span class="fa fa-question"></span> Help</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" onclick="logout()"><span class="fa fa-sign-out"></span> Sign out</a>
        </div>
      </div>
    </div>
  </div>
</nav>

Revised CSS #

/* Remove conflicting float and manual top margin */
#search {
  width: 250px;
}

.search {
  width: 230px;
  height: 30px;
  line-height: 22px;
  display: flex;
  align-items: center; /* Vertically center search input + button */
  margin-right: 15px; /* Add space between search and user menu */
}

.search button {
  margin: 0;
  background-color: transparent;
  border: 0;
}

.search button span {
  font-size: 1.2rem;
  color: #fff;
}

.search input {
  box-sizing: border-box;
  width: 0;
  transition: all 0.7s ease-in-out;
  line-height: 18px;
  padding: 0;
  border: 0;
  margin-left: 180px;
  visibility: hidden;
}

.search:hover input, .search input:focus {
  width: 180px;
  margin-left: 0;
  padding: 0 2px;
  border: 2px inset;
  border-radius: 3px;
  visibility: visible;
}

.search button span:hover, .search button:hover {
  background-color: transparent;
}

.topbar-user img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: 15px;
}

.user-menu {
  color: #fff;
  cursor: pointer;
  display: flex; /* Vertically center "USER" text */
  align-items: center;
}

/* Flex wrapper to push elements to opposite ends */
.navbar-menu-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 60px; /* Adjust to match your navbar's desired height */
  padding: 0 15px;
}

Key Changes Explained: #

• Flexbox Container: The .navbar-menu-wrapper uses justify-content: space-between to push the left menu toggler and right search/user container to opposite ends of the navbar, ensuring right alignment.
• Vertical Centering: Added align-items: center to both the main navbar wrapper and the search/user container to keep all elements vertically centered relative to each other.
• Removed Conflicting Styles: Got rid of float: right and manual margin-top on the search element—flexbox handles alignment more cleanly.
• Spacing: Added margin-right to the search container to create natural space between it and the user menu.
• Consistent Flex Usage: Made the user menu a flex container to ensure the "USER" text stays vertically aligned with the search bar.

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