仅css：将两个项目彼此相邻放置并同时做两个！仅在必要时包装

Posted 2021-04-03

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

大屏幕：

----------------------------------------------------------------------
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()组合），但我却始终无法实现我希望看到如上所述的效果。我一直遇到这样的情况：元素宁愿换行而不是占用整个空间，或者一个元素换行而另一个则拒绝。

答案

将此添加到您的CSS类

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

另一答案

这可以通过flexbox轻松解决，例如：

li {
  display: flex;
}

li .link {
  flex: 1;
}

li .buttons {
  flex: 0 0 30px;
}

演示-https://jsfiddle.net/5mtwfad7/