如何将两个物品并排放置，并仅在必要时将它们都包裹起来?

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>

这是小提琴的基本设置。

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

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

li {
border: 1px solid black;
display: flex;
justify-content: space-between;
}
li .buttons {
text-align: right;
}

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

Answer 2

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 3

您可以使用引导程序轻松完成此操作，方法是制作<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 4

将其添加到您的 CSS 类中

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