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

brvekthn  于 2023-04-23  发布在  其他
关注(0)|答案(2)|浏览(126)

此问题已在此处有答案

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>
erhoui1w

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>
gpfsuwkq

gpfsuwkq2#

你可以使用flexgap,比如:

.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>

相关问题