如何将两个项目并排放置并仅在必要时将它们包裹起来？

Question

我正在寻找一种将两个元素彼此相邻放置的方法。一个元素包含一个链接，另一个元素包含两个按钮。如果在没有换行符的情况下无法容纳两个元素，则应同时换行：

大屏幕：

----------------------------------------------------------------------
https://this-is-a-link.com/with-a-slug                           c  x |
https://this-is-a-link.com/with-a-long-long-long-long-long-slug  c  x |
----------------------------------------------------------------------

小屏幕：

-------------------------------------
https://this-is-a-link.com/with-  c |
a-slug                            x |
https://this-is-a-link.com/with-  c |
a-long-long-long-long-long-slug   x |
-------------------------------------

我要避免的是一个元素会包裹但另一个元素不会包裹的场景：

-------------------------------------
https://this-is-a-link.com/with-  c x |
a-slug                                |
https://this-is-a-link.com/with-  c x |
a-long-long-long-long-long-slug       |
-------------------------------------

我也想避免这种情况：

-------------------------------------------------------------------
https://this-is-a-link.com/with-a-slug                           c |
                                                                 x |
https://this-is-a-link.com/with-a-long-long-long-long-long-slug  c |
                                                                 x |
-------------------------------------------------------------------

标记目前看起来像这样，但可以根据需要进行更改

<ol>
  <li>
    <span class="link">https://this-is-a-link.com/with-a-slug</span>
    <span class="buttons">
      <button>c</button>
      <button>x</button>
    </span>
  </li>
   <li>
    <span class="link">https://this-is-a-link.com/with-a-long-long-long-long-long-slug</span>
    <span class="buttons">
      <button>c</button>
      <button>x</button>
    </span>
  </li>
</ol>

而here 是一个简单的基本设置。

ol {
  background: lightgrey;
  max-width: 600px;
  list-style-type: none;
}

li {
  border: 1px solid black;
}

<ol>
  <li>
    <span class="link">https://this-is-a-link.com/with-a-slug</span>
    <span class="buttons">
      <button>c</button>
      <button>x</button>
    </span>
  </li>
  <li>
    <span class="link">https://this-is-a-link.com/with-a-long-long-long-long-long-slug</span>
    <span class="buttons">
      <button>c</button>
      <button>x</button>
    </span>
  </li>
</ol>

我尝试了各种我能想到的事情，比如制作每个 li 元素 flex 或尝试将整个列表放入 grid （尝试各种 minmax() 组合），但我从未能够实现我想看到的效果如上所述。我一直遇到这样的情况：元素宁愿换行而不是占据整个空间，或者一个元素会换行而另一个元素会拒绝。

Answer 1

ol {
  background: lightgrey;
  max-width: 600px;
  list-style-type: none;
}

li {
  border: 1px solid black;
}

.parent{
  display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

<ol>
  <li class="parent">
    <span class="link">https://this-is-a-link.com/with-a-slug</span>
    <span class="buttons">
      <button>c</button>
      <button>x</button>
    </span>
  </li>
   <li  class="parent">
    <span class="link">https://this-is-a-link.com/with-a-long-long-long-long-long-slug</span>
    <span class="buttons">
      <button>c</button>
      <button>x</button>
    </span>
  </li>
</ol>

Answer 2

您可以通过创建<div class="row"> 使用引导程序轻松地做到这一点，并在其下方放置两列，例如 1 用于您的链接，其他用于您的两个按钮。

例如：

    <div class="row">
 <div class="col-md-4">
        your link code
        </div>
        <div class="col-md-4">
        your buttons code
         </div>

        </div>

Answer 3

将此添加到您的 CSS 类中

.buttons{
  display: flex;
  justify-content: flex-end;
}

Answer 4

检查这个：https://jsfiddle.net/6hwaL0zy/

li {
  border: 1px solid black;
  display: flex;
  justify-content: space-between;
}

li .buttons {
  text-align: right;
}

我认为它符合您的要求，但有一个您没有指定的中间情况（当第二行换行而第一行不换行时）