如何用CSS实现列表在Button3正下方且不嵌套？兼容IE9+

Absolutely! The left + absolute + margin-left approach you tried is fragile because it relies on fixed offsets that break when the page resizes. A much more robust solution exists using inline-block containers and relative/absolute positioning, which works perfectly in IE9 and above.

Core Idea #

• Wrap Button 3 in an inline-block container that stays aligned with the other buttons.
• Set this container to position: relative so it acts as the positioning reference for the list.
• Position the list absolutely with left: 0 and top: 100% to lock it directly below the container (and thus Button 3).

Full Code Example #

HTML Structure #

<div class="container">
  <a href="#" class="button">Button 1</a>
  <a href="#" class="button">Button 2</a>
  <div class="button-wrapper">
    <a href="#" class="button">Button 3</a>
    <ul class="dropdown-list">
      <li>List Item 1</li>
      <li>List Item 2</li>
      <li>List Item 3</li>
    </ul>
  </div>
</div>

CSS Styles #

.container {
  width: 700px;
  height: 40px;
  background: black;
  padding: 0 10px;
  box-sizing: border-box; /* Ensures padding doesn't expand container width (IE9 supports this) */
}

.button {
  display: inline-block;
  color: #ffffff;
  height: 100%;
  padding: 0 20px;
  line-height: 40px;
  text-decoration: none;
}

.button-wrapper {
  display: inline-block;
  position: relative; /* Makes this the parent for absolute positioning */
}

.dropdown-list {
  position: absolute;
  left: 0;
  top: 100%; /* Aligns directly below the wrapper */
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid #ccc;
  min-width: 100%; /* Ensures list is at least as wide as Button 3 */
}

.dropdown-list li {
  padding: 8px 12px;
  color: #333;
}

/* Optional: Hover to show/hide the list */
.dropdown-list {
  display: none;
}

.button-wrapper:hover .dropdown-list {
  display: block;
}

Why This Works Better #

• Responsive Alignment: The button-wrapper is inline-block, so it moves with the other buttons when the container resizes. The list stays glued to Button 3 no matter the page width.
• No Fixed Offsets: You don't need to hardcode margin-left values, which avoids alignment issues if Button 3's position changes.
• IE9 Compatibility: All CSS properties used (inline-block, position: relative/absolute, box-sizing) are fully supported in IE9.
• Flexibility: You can easily adjust the list's width, styling, or add interaction logic (like hover) without breaking the layout.

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