CSS:在没有父元素的情况下强制元素彼此相邻。柔性？

Question

我正在用 Ionic 构建一个库，其中一个要求是我不能添加类并且不能使用父元素或容器来修改或访问我们的元素。

带有按钮的搜索字段应该与图片中的一样:

我只有两个兄弟元素:

<ion-button fill="clear">Button</ion-button>
<ion-searchbar clear-icon="close-circle"></ion-searchbar>

我如何强制搜索字段减小其宽度并为同级按钮元素和位于右侧的按钮腾出空间？

如果我可以使用容器元素，我可以很容易地使用 Flexbox 来实现，对齐和对齐内容。但由于这是一个库，我们不知道父元素会是什么样子，我们不想添加新元素或强制开发人员依赖不需要的元素。

欢迎任何帮助!

Answer 1

使用 CSS:

ion-button {
  float: right;
}

ion-searchbar {
  display: block;
  width: auto;
}

为此，您的 ionic 按钮应该是第一个元素。如果您的搜索栏是第一个元素，则只需切换样式即可。

因为两者高度相同，所以不需要清除 float

示例:

A {
  float: right;

  /* ignore this */
  height: 50px;
  background: green;
}

B {
  display: block;
  
  /* ignore this */
  height: 50px;
  background: red;
}

<A> Some Text </A>
<B></B>