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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了仅css:将两个项目彼此相邻放置并同时做两个!仅在必要时包装相关的知识,希望对你有一定的参考价值。

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

大屏幕:

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

以上是关于仅css:将两个项目彼此相邻放置并同时做两个!仅在必要时包装的主要内容,如果未能解决你的问题,请参考以下文章

使用css显示两个相邻的div,中间有空格

如何将两个 TextViews 定位在 ListView 中彼此相邻,但至少有一定的差距

Twitter bootstrap - 在彼此相邻放置时重叠的前置输入元素

仅在彼此直接相邻的大写字母之间插入空格[关闭]

关键帧动画问题

两个相邻的输入字段 bootstrap 3