CSS列表项样式异常求助：最后一个<li>错位且无法填充容器宽度

Hey there! Let’s break down why that last <li> is misbehaving and fix it up. I spotted a few conflicting styles in your CSS that are throwing off the layout:

Key Issues in Your Original Code #

1. Conflicting layout methods: You’re using display: flex on the <ul> but also adding float: right to <li> elements—these two don’t play nice together, and the float is interfering with flex’s automatic alignment.
2. Broken positioning: The <ul> has transform: translate(-50%, -50%) missing a semicolon, and since its parent container doesn’t have position: relative, the absolute positioning is relative to the whole page instead of the footer navbar.
3. Width misconfiguration: Setting width: 100% on each <li> in a flex container forces them to fight for space, leading to overflow or misalignment.
4. Unnecessary border: The last <li> still has a right border, which can add extra unwanted spacing.

Fixed CSS Code #

/* Add relative positioning to the parent container so ul's absolute positioning works correctly */
.ui-table {
  position: relative;
  width: 100%;
}

ul {
  position: absolute;
  text-align: center;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 3px 0;
  background: #FFF;
  display: flex;
  width: 100%; /* Make ul fill its parent container */
}

ul li {
  list-style: none;
  text-align: center;
  flex: 1; /* Let each li automatically split the ul's width evenly */
  border-right: 1px solid rgba(0, 0, 0, .2);
}

/* Remove the right border from the last list item */
ul li:last-child {
  border-right: none;
}

ul li a {
  text-decoration: none;
  display: block;
  padding: 0 10px; /* Adjust padding to prevent content overflow */
}

ul li a .icon {
  width: 30px;
  height: 30px;
  text-align: center;
  overflow: hidden;
  margin: 0 auto 10px;
}

ul li a .icon .fa {
  width: 100%;
  height: 100%;
  line-height: 30px; /* Match line height to icon height for perfect vertical centering */
  font-size: 24px;
  transition: 0.5s;
  color: #F60;
}

What Changed & Why #

• Relative parent container: Adding position: relative to .ui-table ensures the <ul>’s absolute positioning is tied to the footer navbar, not the entire page.
• Flex layout cleanup: Removed float: right from <li>—flex handles horizontal alignment on its own.
• Even width distribution: Using flex: 1 on each <li> makes them automatically fill the <ul>’s width evenly, no manual percentage calculations needed.
• Cleaned up borders: The last <li> no longer has a right border, eliminating extra spacing.
• Centered icons: Adjusted the .fa line height to match the icon height, so icons sit perfectly centered without shifting.

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