css 如何对齐列表项内的行中的div并填充所有水平空格[重复]

brvekthn 于 2023-04-23 发布在其他

关注(0)|答案(2)|浏览(125)

此问题已在此处有答案：

Make a div fill the height of the remaining screen space（42答案）
2天前关闭。
CSS新手在这里。我想有文本div填充所有的水平空间，并有按钮“坚持”的权利。项目编号，文本和按钮都应该在同一行，即使文本不适合在一行。如果这种布局是多余的或不足，请纠正我。
我希望它看起来像这样：

<ol>
  <li>
    <div class="wrapper">
      <div class="text">
        some item text
      </div>

      <div class="button">
        <a>GO</a>
      </div>
    </div>
  </li>
</ol>

css

来源：https://stackoverflow.com/questions/76064498/how-to-align-divs-in-a-row-inside-a-list-item-and-fill-all-horizontal-space

2条答案

按热度按时间

erhoui1w1#

将display: flex;添加到父节点（即.wrapper），将flex-grow: 1;添加到子节点（即.text）。
请参见下面的片段。

.wrapper {
  display: flex;
}

.text {
  flex-grow: 1;
}

<ol>
  <li>
    <div class="wrapper">
      <div class="text">
        some item text
      </div>
      <div class="button">
        <a>GO</a>
      </div>
    </div>
  </li>
</ol>

赞(0）回复(0）举报 2023-04-23

gpfsuwkq2#

你可以使用flex和gap，比如：

.wrapper{
  display:flex;
  gap: 10px;
}

<ol>
  <li>
     <div class="wrapper">
       <div class="text">
         some item text
       </div>
       <div class="button">
         <a>GO</a>
       </div>
     </div>
  </li>
</ol>

赞(0）回复(0）举报 2023-04-23

我来回答

css 如何对齐列表项内的行中的div并填充所有水平空格[重复]

2条答案

相关问题

热门标签

最新问答