如何在列表项内将div横向排列并让文本div占满水平空间

架构老林

2026-7-24

解决方案

第一步：精简HTML结构

原代码里的.wrapper属于冗余层级，直接去掉后让<li>作为容器承载文本和按钮，结构更简洁：

<ol>
  <li>
    <div class="text">
      这里是可以换行的长文本内容，即使换行也不会让按钮跑到下面，编号始终和内容顶部对齐
    </div>
    <div class="button">
      <a>GO</a>
    </div>
  </li>
  <li>
    <div class="text">
      短文本示例
    </div>
    <div class="button">
      <a>GO</a>
    </div>
  </li>
</ol>

第二步：CSS实现布局

用Flex布局就能完美实现需求，代码注释会说明关键属性作用：

/* 重置列表默认样式，避免浏览器自带样式干扰布局 */
ol {
  list-style-position: inside; /* 让编号和内容在同一容器内对齐 */
  padding-left: 0;
  max-width: 500px; /* 可按需调整最大宽度，方便查看换行效果 */
  margin: 0 auto;
}

/* 将li设为flex容器，让内部元素横向排列 */
li {
  display: flex;
  align-items: flex-start; /* 文本换行时，编号和按钮保持顶部对齐 */
  gap: 10px; /* 文本与按钮间的间距 */
  margin-bottom: 10px; /* 列表项之间的间距 */
  padding: 8px;
  border: 1px solid #eee; /* 可选：加边框便于观察布局范围 */
}

/* 让文本容器自动占满li的剩余水平空间 */
.text {
  flex: 1;
  word-wrap: break-word; /* 强制长文本换行 */
}

/* 按钮固定在右侧，确保文本不挤压按钮 */
.button {
  white-space: nowrap; /* 按钮文本不换行 */
  padding: 4px 12px;
  background: #007bff;
  border-radius: 4px;
}

.button a {
  color: white;
  text-decoration: none;
}