求助：实现简约可展开式搜索栏及解决元素对齐问题

Hey there! Let's fix that alignment issue and build the sleek, click-to-expand minimal search bar you're aiming for. Here's the revised solution with clear explanations:

First, let's address the alignment problem and implement the expandable functionality you want. Below is the complete working code, followed by breakdowns of the changes:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<style>
/* Container styling */
.search-row {
  background-color: black;
  padding: 10px;
  display: flex;
  justify-content: flex-end; /* Adjust to align search bar left/center as needed */
}

/* Core search group styling */
.stylish-input-group {
  position: relative;
  width: 40px; /* Collapsed state: only icon visible */
  transition: width 0.3s ease; /* Smooth expand animation */
}

.stylish-input-group.expanded {
  width: 200px; /* Expanded state: input visible */
}

/* Input field tweaks */
.stylish-input-group .form-control {
  border: none;
  border-radius: 20px; /* Rounded corners for minimalism */
  padding: 8px 35px 8px 15px;
  box-shadow: none;
  width: 100%;
  opacity: 0; /* Hide input initially */
  transition: opacity 0.3s ease;
}

.stylish-input-group.expanded .form-control {
  opacity: 1; /* Show input when expanded */
}

/* Search button alignment fix */
.stylish-input-group .search-btn {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 40px;
  background: white;
  border: none;
  border-radius: 50%; /* Circular icon container */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.stylish-input-group .fa-search {
  color: black;
}
</style>

<div class="search-row">
  <div class="input-group stylish-input-group">
    <input type="text" class="form-control" placeholder="Search">
    <button class="search-btn" type="button">
      <span class="fa fa-search"></span>
    </button>
  </div>
</div>

<script>
// Toggle expand/collapse on icon click
$('.search-btn').click(function() {
  $('.stylish-input-group').toggleClass('expanded');
  // Auto-focus input when expanded for better UX
  if ($('.stylish-input-group').hasClass('expanded')) {
    $('.form-control').focus();
  }
});

// Collapse search bar when clicking outside of it
$(document).click(function(e) {
  if (!$(e.target).closest('.stylish-input-group').length) {
    $('.stylish-input-group').removeClass('expanded');
  }
});
</script>

Key Fixes & Improvements: #

• Alignment Resolution: Used position: absolute for the search button to bypass Bootstrap's default input-group margins/paddings that were causing misalignment. This ensures the icon stays perfectly centered with the input field.
• Expand/Collapse Animation: Added CSS transitions for smooth width and opacity changes, so the input slides in/out seamlessly when clicking the icon.
• Minimalist Design: Stripped unnecessary borders, adjusted radii, and simplified styles to match your "no excessive customization" request.
• Enhanced UX: Added auto-focus to the input when expanded, and collapse functionality when clicking outside the search bar for a more intuitive experience.
• Streamlined Structure: Removed redundant Bootstrap classes that were conflicting with your desired layout, and cleaned up the HTML for better readability.

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