如何让列表项按钮与文本同行？解决标题占宽致按钮换行问题

这个问题我之前也碰到过！核心是要给列表项的布局设置合理的空间分配，让标题和按钮各自待在该待的位置，不会互相挤压。用CSS Flexbox就能轻松搞定，给你捋捋具体方案：

核心思路 #

通过Flexbox布局让列表项内部的标题自动占据剩余空间，按钮固定在右侧；同时给标题设置文本溢出规则，避免它挤占按钮的位置。

代码实现示例 #

HTML结构

<ul class="item-list">
  <li class="list-item">
    <span class="item-title">正常长度的列表标题</span>
    <button class="action-btn">操作</button>
  </li>
  <li class="list-item">
    <span class="item-title">这个标题超级长超级长超级长超级长超级长超级长超级长，测试会不会挤掉按钮</span>
    <button class="action-btn">操作</button>
  </li>
</ul>

CSS样式

.item-list {
  list-style: none;
  padding: 0;
  width: 350px; /* 模拟容器宽度，根据你的实际场景调整 */
}

.list-item {
  display: flex;
  align-items: center; /* 让标题和按钮垂直居中对齐 */
  padding: 10px 15px;
  border: 1px solid #e0e0e0;
  margin-bottom: 8px;
  transition: background-color 0.2s ease;
}

.item-title {
  flex: 1; /* 关键！让标题占据列表项的所有剩余空间 */
  /* 方案1：文本过长时显示省略号，不换行 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  
  /* 方案2：允许文本自动换行，按钮始终固定在右侧 */
  /* white-space: normal; */
}

.action-btn {
  margin-left: 12px; /* 和标题保持间距，避免紧贴 */
  opacity: 0; /* 默认隐藏按钮 */
  transition: opacity 0.2s ease;
}

.list-item:hover {
  background-color: #f5f5f5;
}

.list-item:hover .action-btn {
  opacity: 1; /* 悬停列表行时显示按钮 */
}

关键细节说明 #

1. flex:1的作用：给标题设置这个属性后，它会自动填充列表项中除按钮外的所有可用空间，彻底避免按钮被挤到下一行。
2. 文本溢出处理：两种方案任选其一——如果希望标题保持单行，用省略号截断；如果允许换行，直接去掉white-space: nowrap即可，按钮始终会固定在右侧。
3. 平滑过渡效果：用opacity控制按钮的显示隐藏，比display: none更顺滑，而且不会破坏布局结构。

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