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

检查以下内容：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作为链接，另2作为两个按钮。

例如：

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

System.out.println(new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[@class='status-value' and @id='divdoctyp']"))).getText());

如何将两个项目彼此相邻放置并仅在必要时才将它们包装？

4 个答案: